Blog

How to set CSS3 Border-Radius with Slash Syntax

admin February 7, 2014 code css css3 design develop html5
How to set CSS3 Border-Radius with Slash Syntax

What could I possibly say about the CSS3 border-radius property that hasn’t been said before? Well, I can’t claim that anything I’ll be saying in this article will be completely new to anyone who regularly reads articles covering front-end technologies.

Setting CSS3 Border-Radius with Slash Syntax

Sometimes, however, the apparent simplicity of a particular CSS3 property might blind us to the fact that there can be a whole lot more going on than we think.

That’s exactly what this short article will help to establish—specifically in relation to the border-radius property.

But don’t worry—I’ll go through this carefully, covering some border-radius basics first, to ease into the discussion.

Before I get into the meat of things, I’m happy to announce that I’ve recently had the privilege of co-authoring an exciting new book project published by SitePoint. It’s called HTML5 and CSS3 for the Real World and is scheduled for a late May launch. Naturally, border-radius will be covered in that upcoming book, but I thought it would be nice to expand on that topic here and provide a little extra for those interested in delving into some of the finer points associated with this property.

The border-radius Basics

border-radius is a pretty simple property to use, and has 100% support across all modern browsers, and is even supported in quite a few earlier browser versions. Here’s how the syntax looks in its most basic shorthand form:

#element {

  border-radius: 10px;

}

That will put a 10px radius (i.e., a rounded edge) on each corner of the targeted element. If you want to specify a different value for each corner, you can do this:

#element {

  border-radius: 10px 5px 20px 16px;

}

The values start with the top-left and move clockwise.

Just like the margin and padding properties you can, of course, omit one or two values and the existing values will be used to determine the omitted ones:

#element {

  border-radius: 10px 5px 20px;

}

In that last example, although I’ve omitted the value for the bottom-left corner, the bottom-left corner will inherit its radius value from the one specified for top-right (the second value). Similarly, if you omitted the third and fourth values, then the third value (bottom-right) would inherit from the first (top-left).

Finally, you can also declare each corner individually using longhand syntax, like this:

#element {

  border-top-left-radius: 10px;

  border-top-right-radius: 5px;

  border-bottom-right-radius: 20px;

  border-bottom-left-radius: 16px;

}

Pretty simple. And I’ll bet you already knew all of that, didn’t you?

Now, let’s bring in a little complexity so we can really get to know this CSS3 property.

Different Values for Horizontal and Vertical Radii

Because the standard way of declaring the border-radius values (discussed above) has become so widespread, you may not be aware of an alternative syntax for this property.

Take a look at the following code example:

#element {

  border-radius: 55px / 25px;

}

When I first saw that style of syntax, with the slash in between the two values, my first reaction was: That can’t be right! But it is. Here’s how the spec explains it:

“If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.”

Below is an image of what the element looks like with the above syntax, and with dimensions of 200px by 200px and a gray background. Bear in mind, a CSS3-capable browser would be required to see the HTML rendition.

 

The slash-based syntax might be a difficult thing to wrap your mind around, so let’s examine how the syntax relates to what’s happening to the shape of the corners on that element.

 

In the above image, I’ve blown up the element and placed an ellipse into the corner so that the upper curve of the ellipse overlaps the rounded corner as closely as possible. A “radius”, according to the dictionary definition is “a straight line extending from the center of a circle or sphere to the circumference or surface.”

According to the spec, the values you give the border-radius property “define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge.” Thus, if you add the full ellipse (as I’ve done above), you’ll see exactly how the radii are calculated. In the image, I’ve drawn arrows indicating the horizontal and vertical radii (marked with “H” and “V”).

Keep in mind that because of pixelation (in the original and the blown up version), this can’t be an exact science; that would be something more appropriate when dealing with vector-based shapes.

Other Horizontal/Vertical Radii Options

Of course, the slash-based syntax is not just limited to two values; if you wish, you can set specific vertical and horizontal radius values for each corner of the element.

The syntax from above can alternatively be expressed like this:

#element {

  border-radius: 55px 55px 55px 55px / 25px 25px 25px 25px;

}

The values before the slash represent the horizontal radii for the top-left, top-right, bottom-right, and bottom-left corners, respectively. The values after the slash represent the vertical radii for those same corners, in that order.

And of course, similar to the traditional syntax, you can omit one or two values from before or after the slash, and the missing values will inherit from the existing ones.

You also have the option to declare different vertical and horizontal radii using the longhand syntax for each corner. So if we wanted to use longhand syntax to create the same shape from above, we would do this:

#element {

  border-top-left-radius: 55px 25px;

  border-top-right-radius: 55px 25px;

  border-bottom-right-radius: 55px 25px;

  border-bottom-left-radius: 55px 25px;

}

Notice that this time there is no slash used. In this case, the two space-separated values on each line represent the horizontal and vertical radii, respectively, for the given corner.

When Should This Syntax Be Used?

It should be noted that this syntax to target vertical and horizontal radius values for each corner would only be used if you want the vertical and horizontal radius values on a single corner to differ from one another. That means you would not need to use this syntax if you want equal horizontal and vertical radius values for each corner.

Significantly, you could also employ this syntax when changing radius values via scripting. Thus, when used appropriately, this could open the door for some interesting animations using transitions or keyframe-based animations.

So in most—if not all—cases, you can stick to the traditional syntax, and only use the syntax described here if you want one or more nonsymmetrical rounded corners.

Even so, this information should be enough for you to want to experiment a little further with this otherwise well-known CSS3 property.

Let me know what you come up with.

Like
Like Love Haha Wow Sad Angry

245 Responses

  2. poker dewa
    |

    Dalam memilah web slot online terbaik 2023 di Indonesia pasti perihal yang wajib dicermati. Salah satu perihal yang kerap dicermati merupakan memilah salah satu opsi web yang menawarkan banyak bonus serta jackpot. poker dewa muncul menawarkan bermacam hadiah serta bonus besar. nagapoker nyatanya player dapat menikmati bermacam opsi yang ada dari banyak provider judi slot ternama di segala dunia.

  3. binance dai
    |

    Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  6. gate io
    |

    After reading your article, it reminded me of some things about gate io that I studied before. The content is similar to yours, but your thinking is very special, which gave me a different idea. Thank you. But I still have some questions I want to ask you, I will always pay attention. Thanks.

  10. gate fon şifresi
    |

    Very nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  11. slot
    |

    … [Trackback]

    […] Info on that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  12. 뉴토끼
    |

    … [Trackback]

    […] Read More on on that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  13. GarrettEssex
    |

    I recently tried CBD gummies because the earliest organic cbd gummies circumstance and they exceeded my expectations. The dash was delightful, and they helped me unwind and relax. My anxiety noticeably decreased, and I felt a meaning of whole well-being. These gummies are now a fundamental in my self-care routine. Hugely propose for a logical and quieting experience.

  15. Edwinchuch
    |

    I recently embarked on a expedition to grow autoflower weed seeds for the win initially in good time, and it was an incredibly buy cheap marijuana seeds satisfying experience. As a beginner, I was initially apprehensive, but the prepare turned gone from to be surprisingly straightforward. First off, the germination taper off was mellow sailing. The seeds sprouted shortly, and their vigor was impressive. I followed the recommended guidelines regarding lighting, nutrients, and watering, and the plants responded positively. A particular of the biggest advantages of autoflowering strains is their know-how to automatically transformation from vegetative proliferation to flowering, regardless of mild cycle.

  17. buy weed online
    |

    … [Trackback]

    […] Find More here to that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  49. ufabet
    |

    … [Trackback]

    […] Read More to that Topic: enthuons.com/how-to-set-css3-border-radius-with-slash-syntax/ […]

  69. 20bet
    |

    Your article gave me a lot of inspiration, I hope you can explain your point of view in more detail, because I have some doubts, thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Useful Links

GET IN TOUCH

  • A-22, 2nd Floor, Sector-4, Noida, Uttar Pradesh 201301, India

  • (+91)9582545485

  • services@enthuons.com

  • Mon – Sat: 10:00 AM to 7:00 PM

© Enthuons Technologies Pvt Ltd All Rights Reserved

arrow-down