Ultimate CSS-Only Rounded Corners

There are various ways of rounding corners using images. These work well in general but they increase web-server load and page loading times.

This method is pure CSS, no images required, the perfect way to round the corners of anything.

Replace "object-with-rounded-corners" with the name of the element you wish to have rounded corners.
.object-with-rounded-corners {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

The "-webkit" is for Safari and Google Chrome and a few other browsers.
The "-khtml" is for Konqueror based browsers.
The "-moz" is for Mozilla based browsers

For best results use the same values for each browser.

0