CSS border-radius. How does it work?
A brief junior-friendly overview with visual examples.
Almost every button you see in interfaces has rounded corners. Modals are rounded as well as cards, icons, and logos. We’ve got used to round avatars and badges.
We know how it works and what the result looks like. But how are the radii calculated, and how are two adjacent borders aligned?
To answer these questions, let’s consider 6 different examples of border-radius
:
- a simple radius
100px
for border width100px
; - a big radius
150px
for border width100px
; - a pair of radii
100px/50px
; - a radius as a percentage;
- a radius for borders of different widths and styles;
- a radius that exceeds the size of the border-box;
For simplicity, all examples will round only the top left corner. I will use two identical figures, and the only difference is the rendering of the radii on top of the second shape.
A simple radius
We have a 100px/100px
div with the 100px
border width. Let’s set the border-radius
no bigger than our border-width
— 100px
. How it works: the corner of the border is drawn around a circle with a radius equal to the border-radius
value. Let’s look at the visualization:
Everything is as simple as possible. The borders of our figure flow around the simple circle.
Please pay attention to the outer edge of our border that is rounded and the inner padding edge that’s not. In this example, it’s not affected by the border-radius
. How to round the inner edge will be discussed below.
A big radius
I’ve never noticed before that border-radius
affects the outer and inner edges of the border differently. In fact, the behavior is quite logical:
The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero.
Again, it’s more evident with a visual example. It is identical to the previous one, the only difference is — border-radius: 150px
.
A pair of radii
The fun begins with using an ellipse instead of a circle for the radius. To do this, we need to specify two radii — horizontal and vertical.
The following example is identical to the first: 100px/100px
with border width 100px
but border-radius is 100px / 50px
.
It looks unusual but works the same way as a simple circle — an ellipse defines the shape of the corner.
The inner edge of the border would also be rounded if the radii were greater than the border width. This rule works the same for ellipses.
A radius as a percentage
This example works according to all the previous rules. The interesting point is — what percentages refer to.
Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.
In this example, all sizes are standard — 100px/100px
, borders are 100px
. The width of the border-box, in this case, will be equal to the sum of the width, left border and right border 100px + 100px + 100px = 300px
. The same calculations for the vertical radius, but we use the height here. In our example, the result will be identical — 300px
. Then it’s simple — do the math: 30%
of 300px
is 90px
for each radius.
If the div had padding, we would also add it to the border-box width and height.
If the width and height were different, border-radius: 30%
would be an ellipse, not a circle.
A radius for borders of different widths and styles
We can get fun results if the borders differ in style or thickness, but conceptually, these examples are no different from the first one.
A radius that exceeds the size of the border-box
There is also an exception to the border-radius
rules. Corner curves must not overlap.
Let’s take our standard 100px/100px
example with the border-width: 100px
but the radius is 350px
. It’s more than the width of the border-box, as a reminder: 100 + 100 + 100 = 300
.
The example shows that the 350px
circle doesn’t define the shape of the corner. So what radius is used in this case?
When the sum of any two adjacent border radii exceeds the size of the border-box (in our case, it’s the only radius 350px
), the used values of all border radii must be proportionally reduced until none of them overlap. So in our example, it’s 300px
— the biggest possible box size.
That’s why border-radius: 50%
and border-radius: 100%
are identical.
Width of the border-box: 100px + 100px + 100px = 300px
;
Radius 50%: 300px * 50% = 150px
; two such radii: 300px
;
Radius 100%: 300px * 100% = 300px
; two such radii: 600px
;
A radius of 100% is greater than the width of the border-box, and a radius of 50% is equal to that width, so in both cases, the corners are rounded to a radius of 300px
.
As promised, the article is short and straightforward. But it clearly describes all the basic rules for building rounded corners. I hope it motivates you to experiment with different shapes in CSS.
Thanks for reading so far!
See you next time! 🤹🏻♀️