Skip to main content
Home / CSS Almanac / Properties / B / border-radius

border-radius

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;
}


It's really not necesssary anymore, but for the absolute best possible browser support, you could 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. MDN explains it well:

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

Here's a little thing to play with the different properties and values:

See the Pen All the border-radius' by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
4*10.53*9123.1*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
3.2*11No2.1*7668
icon-link icon-logo-star icon-search icon-star