Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: DIVs and containers: CSS3 demos: Here

CSS3 Rounded Corners using border-radius

Among CSS3's handy new features is the border-radius property, which offers a clean and easy way of adding rounded corners to elements on the page. The rounded corner look can be applied to any or all four corners of an element, and even works with elements with a background image. Practically speaking border-radius is supported in FF3, Safari3, and Google Chrome, by way of vendor specific equivalent properties as they race to eventually just support border-radius. IE users (as of IE8) are out of luck at the moment unfortunately.

While the details of the official border-radius property are being worked out, the vendor equivalent properties for FF3.x, Safari 3.x, and Chrome that you can use right now are:

  • -moz-border-radius: value
  • -webkit-border-radius: value

Safari and Chrome both use the "-webkit-" version btw. For the time being, you should define both properties to cover your bases while browsers move to support the official version. "value" in this case can be a singular value (ie: 10px) that defines the radius of the border for all 4 corners, for example:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

This causes all 4 corners of the element to be rounded. But what if you only want select corners to get the rounded effect? Individual border radius properties lets you do that, which are:

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomright
  • -moz-border-radius-bottomleft
  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-right-radius
  • -webkit-border-bottom-left-radius

In Firefox, the -moz-border-radius property we saw at the beginning can in fact act as a shorthand property to all 4 individual border radius properties. Simply enter 4 separate values to affect each of the 4 corners. Safari unfortunately does not yet support such a shorthand. With this new found knowledge at hand, here's a link with tear shaped corners:

Dynamic Drive

background: #B73A28;
padding: 3px 5px;
color: white;
font-weight: bold;
text-decoration: none;
-moz-border-radius: 9px 3px 9px 3px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;


Notice in Firefox, I simply use a single property to define the radiuses of all 4 corners, while in Safari, I need to also use two of the individual border radius properties.

CSS3's border-radius property plays nicely with other CSS properties such as border and even CSS3 Box Shadows. The rounded corners will follow the new edges seamlessly. In the below example, I give a DIV with a background image both rounded corners plus box shadows:

background: url(pool.jpg);
width: 250px;
height: 120px;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;


Not bad with just CSS!

Code Info

Rate this code:

Date Posted: 01/01/2010

Revision History: None

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive