border-radius

Last updated on: May 13, 2013

You can give any element "rounded corners" by applying a border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's over. Simple examples:

#example-one {
  border-radius: 10px;
  background: #BADA55;
}
#example-two {
  border-radius: 10px;
  border: 3px solid #BADA55;
}

For the best possible browser support, you should prefix with -webkit- and -moz-:

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

Notice the order of those properties: the vendor prefixes are listed first and the non-prefixed "spec" version is listed last. This is the correct way to do it. Border radius is a particularly good example of why we do it that way. In slightly more complicated version of using border-radius (where you pass two values instead of one) the older -webkit- vendor prefix would do something entirely different than the "spec" version. So if we blindly copy/paste the same values to all three properties, we could see different results cross-browser. Learn more about this scenario. For the most consistency long-term, it's best to list the "spec" version last.

It's pretty realistic these days to drop prefixes and just use border-radius, as discussed here.

If the element has an image background, it will be clipped at the rounded corner naturally:

#example-three {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */
}

Sometimes you can see a background-color "leak" outside of a border when border-radius is present. (see). To prevent this you use background-clip:

.round {
  border-radius: 10px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
}

With just one value, border-radius will the same on all four corners of an element. But that need not be the case. You can specifiy each corner separatedly if you wish:

.round {
   border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */
}

You can also specify two or three values. The Mozilla Docs explains it best:

If one value is set, this radius applies to all 4 corners.
If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
Three values: The second value applies to top-right and also bottom-left.

#example-four {
  border-radius: 5px 20px 5px;
  background: #BADA55;
}

You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn't have to be perfectly circular, it can be elliptical. This is done using a slash ("/") between two values.

#example-five {
  border-radius: 10px/30px; /* horizontal radius / vertical radius */
}
#example-six {
  border-radius: 30px/10px; /* horizontal radius / vertical radius */
}

Note: Firefox only supported elliptical borders in 3.5+ and older WebKit browsers (e.g. Safari 4) incorrectly treat "40px 10px" as the same as "40px/10px".

You may specify the value of border-radius in percentages. This is particularly useful when wanting to create a circle or elipse shape, but can be used any time you want the border radius to be directly correlated with the elements width.

#example-seven, #example-eight {
   border-radius: 50%;
}
#example-eight {
   width: 200px;
}

Note: In Safari percentage values for border-radius only supported in 5.1+. In Opera, only supported in 11.5+.

Here's each individual property, with vendor prefixes:

.round {
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;
}

Note: Each of those values can have a space-separated value as well, like "5px 10px", which behaves like a slash-separated value in shorthand (horizontal radius [space] vertical radius).

Resources

• Quick tool for generating border radius code
• Mozilla Docs
• In search of the perfect radius
• Do we need to prefix border-radius anymore?

Browser Support