CSS border-radius (CSS border-radius)

Introduction to the

In this year’s Frontend Conference Zurich, Rachel Andrew talked about unleashing the power of CSS grid layouts. At the end of her talk, she mentioned some old CSS properties that stuck in my mind:

“Image rounding effects can be set just by using a well-supported border-radius. Don’t forget that the old CSS is still alive and well. You don’t have to do fancy things for every effect.” – Rachel Andrew

Not long after listening to this talk, I started digging deeper into what more could be done with border-radius.

A value

Let’s start with the basics, and hopefully it won’t bore you too much. The border-raduis property of CSS has been around for years, and you’ve probably already used it to create some simple rounded corners. The most common approach is probably something like this: border-radius: 1em. Back in 2010, this was probably the attribute of the most beloved heated discussion on the then popular site Css3please.com.

When border-raduis is set with a value, the radius of each corner of the element is set to that value.

px
rem
em
50%
border-radius: 110px
border-radius: 30%

8 values split by slash (this is where it gets interesting)

I think you already know the above. Now we get to the exciting point where we can use slashes to separate up to eight values, so what happens? Let’s see what the spec says:

If values are set before and after the slash, the value before the slash is set to the horizontal radius and the value after the slash is set to the vertical radius. If there are no slashes, the two radii are the same. – the W3C

That is, the value before the slash defines the horizontal distance, while the value after the slash defines the vertical distance. What does that mean? Remember the percentage value you set for the rectangle earlier? We can set different absolute values for vertical distances, horizontal distances, and asymmetrical rounded corners, which is precisely what we can achieve with slash syntax.

You can compare the following border-radius: 4em 8em with border-radius: 4em / 8em:

The symmetrical Angle on the left takes up a quarter of the circle, while the asymmetric Angle on the right takes up a quarter of the oval.

To be honest, the shapes you see might look and feel a little strange. Remember the circle you implemented with border-radius: 50%, which is circular because the angular radii on both sides add up to 100% (50% + 50% = 100%), and the space between the two angular radii is used up, making it possible to implement a circle using a square. If we use the full 8-value border-radius slash syntax, we can achieve shapes that look a bit like harpsichord or organic cells:

The final shape above is formed by four overlapping ellipses below. Simple ha! (Translator’s Note: It’s not easy.)

Sit tight and take it easy

Now that you’ve learned the slash syntax for eight values, you might still feel a little sad that our border-radius-tool doesn’t provide separate Settings for two radius values for each corner… Here, sit back, calm down, there’s an 8-point omni-control gadget.

Adjust the above 8 control points freely, you may get unexpected beautiful shape, try it!

PS. Thank you very much Simurai. Back in 2010, he created some CSS3 BonBon button effects. Even if they seem a little old-fashioned, this is the only place I’ve ever encountered and learned about slash syntax.

Here are some cool things you can do with slash syntax:

Photos by gratisography.com

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)