CSS Tip: Better Rounded Borders

We’ve all used border-radius in our designs to round the corners of images, divs, navs, etc… But have you ever noticed what happens when a thick border is added to an element with a border radius?

As we learned in my CSS Deep Dive on the subject, the rounded corners in border-radius are formed by the radius of a quarter circle.

The quarter sections of each circle form the rounded corners of the element.

When Thick Borders Connect

There’s a slight issue that occurs when we pair border-radius with a thick border-width. The following image, for example, has a radius value that’s twice the border thickness.

.mike {
  border-radius: 12px;
  border: 6px solid crimson;
}

No issues just yet.

But, if we make the border-width value larger than border-radius, we lose the rounded corners – the edges in our image become squared.

.mike {
  border-radius: 12px;
  border: 14px solid crimson;
}

As the border gets wider, the image’s corners become squared.

Why Does This Happen?

This is because border-radius actually shapes the outer part of a border––not the inner. The inner radius shape is determined by the border-radius value minus the border thickness. This results in an inner radius that’s usually smaller than the outer radius.

So if the border-width value is greater than border-radius, we see the effect of a quarter radius connecting two borders that are thicker than the actual radius.

Notice the squared inner radius:

To make both radiuses proportional, we’ll need to adjust the radius value to about double the border width, or the sum of border-width and border-radius.

.mike {
  border-radius: 26px;
  border: 14px solid crimson;
}

When we change the border-radius value to 26px, we get the rounded corners back in our image.

The Box-shadow Method

When we generate a box shadow, the shadow follows the border radius of the element. With that in mind, we can use the optional box-shadow spread value to create what looks exactly like a border.

The spread radius sets the spread distance of the box shadow. If we set the offsets and blur to 0, the spread value defined renders a hard-edged border around the element.

.mike {
  border-radius: 12px;
  box-shadow: 0 0 0 14px crimson;
}

The result looks exactly like our border style example. But now we don’t have to worry about increasingborder-radius every time we increase the border width because the spread value will always follow the radius.

Using Sass Variables

If we’re using a preprocessor like Sass, we can create variables for the border width and radius, then use a simple math operation that proportionality shapes the radius.

$border-width: 14px;
$radius: $border-width*1.9;  

.mike {
  border: $border-width solid crimson;
  border-radius: $radius;
}

Conclusion

The box-shadow method discussed does come with a caveat. Since box shadows are not part of an element’s box model, the faux borders overlap parts of other inline or floated elements, so we’ll need to compensate with extra margins.

CSS box shadows are supported in all the latest browsers, including IE9+.

source blog teamtreehouse