CSS

How Does It Work

Css Basics

Junior Developer

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.

Photo by Adem AY on Unsplash

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 width 100px;
• a big radius 150px for border width 100px;
• 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:

Size 100px/100px, border width 100px, radius 100px

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.

Size 100px/100px, border width 100px, 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.

Size 100px/100px, border width 100px, radii 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.

Size 100px/100px, border width 100px, radius 30%

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.

Size 100px/100px, borders width 50px 100px 50px, radius 100px

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.

Size 100px/100px, border width 100px, radius 350px

The example shows that the 350px circle doesn’t define the shape of the corner. So what radius is used in this case?

Size 100px/100px, border width 100px, radius 350px

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.

Size 100px/100px, border width 100px, radii 50% and 100%

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! 🤹🏻‍♀️

Солов’їною:

CSS border-radius. Як це працює?