How to Make Rounded Corners With CSS

Sometimes it is a good design solution to have some elements on the page with corners slightly rounded. It can give them a better and softer look. In this simple tutorial we will explain how it can be achieved with pure CSS — and show you live examples.

The Old Way: Using Rounded Images

In the earlier times, 10 or 15 years ago, when CSS was not as advanced as now, webmasters was doing rounded corners using images. They was making images for all four corners, and applying them to some container with background-image.

There were many websites for simplifying this (most of them are not operating today), for example, RoundedCornr. The webmaster could choose a corner radius and desired colors, and the website generated four image files and the necessary HTML and CSS code to put rounded corners around the content.

If you are curious, you can read about this technique here.

The Modern Way: Using border-radius Property

With CSS 3 the things have been made simpler. Native support for rounded corners was added, and now it is possible to achieve with pure CSS. There are several CSS properties to handle rounded corners, the most known and the most used is border-radius. Its full syntax is as follows:

border-radius: border-top-left-radius border-top-right-radius 
border-bottom-right-radius border-bottom-left-radius

It is not necessary to specify all radius values for all four corners. You can supply:

• One value, which will be used for all corners:

  border-radius: 10px;

• Two values: first is for top left and bottom right corners, and the second is for top right and bottom left corners:

  border-radius: 10px 20px;

• Three values: first is for top left corner, second — for both top right and bottom left corners, and third for the bottom right corner.
• Four values: radius is specified for all four corners in the standard CSS clockwise order: top left, top right, bottom right and bottom left corner.

You can also make elliptical corners by specifying the horizontal radius and the vertical radius divided by slash (see example below).

For full documentation on border-radius property, consult the W3 website.

Code examples

It's always better with an example, so let's go to the the CSS code.

<div style="border: 3px solid red; border-radius: 20px;
width: 300px; height: 100px;></div>

<div style="border: 3px solid orange; border-radius: 60px 0;
width: 300px; height: 100px; padding: 10px; margin: 5px 0"></div>

<div style="border: 3px solid green; border-radius: 50% 5px 5% 0;
width: 300px; height: 100px"></div>

<div style="border: dashed blue; border-width: 2px 4px;
border-radius: 13em/3em; width: 300px; height: 100px; line-height: 100px;
text-align: center">Rounded corners are easy!</div>

<div style="border: 3px solid purple; border-radius: 50%;
width: 200px; height: 200px; line-height:200px; text-align: center">
This is a round div!</span></div>

border-radius vs -moz-border-radius vs -webkit-border-radius vs -ms-border-radius vs -o-border-radius

Sometimes you can meet the CSS code containing the alternative CSS properties — -webkit-border-radius, -moz-border-radius and so on.

These are the vendor-prefixed properties offered by the corresponding rendering engines (-webkit for Chrome and Safari; -moz for Mozilla (Firefox and Gecko), -o for Opera, -ms for Internet Explorer). They were introduced for experimental CSS declarations support.

Sometimes you can see all of them together:

.rounded
{  
 -moz-border-radius: 2em;
 -ms-border-radius: 2em;
 -o-border-radius: 2em;
 -webkit-border-radius: 2em;
  border-radius: 2em;
}

Nowadays it is recommended to use single border-radius, because it is the CSS standard now and works with all modern browsers (check on caniuse). Also, there is a global trend to avoid using the vendor prefixes.