You're here: Home » CSS » Rounded Corners Cross Browser

Rounded Corners Cross Browser

On Sep 1, 2011 under CSS

With lots of browsers and different coding formats, making CSS rounded corners become a little hard task at times. Here I am presenting the code in an easy to use way along with demo.

All Corners (Short)

-moz-border-radius: 25px; /* firefox */
-webkit-border-radius: 25px; /* webkit */
-o-border-radius: 25px; /* opera */
-ms-border-radius: 25px; /* ie */
-khtml-border-radius: 25px; /* Konqueror */
border-radius: 25px; /* CSS3 */

Demo – All Corners Rounded (Short)

This is how "border-radius: 25px;" looks.

Many designers say that -o-border-radius was never supported and it’s not needed. But I have added all possible border-radius codes so that it’s compatible with all browsers.

All Corners (Full)

-moz-border-radius: 25px 25px 5px 5px;
-webkit-border-radius: 25px 25px 5px 5px;
-o-border-radius: 25px 25px 5px 5px;
-ms-border-radius: 25px 25px 5px 5px;
-khtml-border-radius: 25px 25px 5px 5px;
border-radius: 25px 25px 5px 5px;

Demo – All Corners Rounded (Full)

This is how "border-radius: 25px 25px 5px 5px;" looks.

In the above code, the values go in this order: top left – top right – bottom right – bottom left.

Individual Corners

-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-topleft: 25px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-top-left-radius: 25px;
-o-border-bottom-right-radius: 25px;
-o-border-bottom-left-radius: 25px;
-o-border-top-right-radius: 25px;
-o-border-top-left-radius: 25px;
-ms-border-bottom-right-radius: 25px;
-ms-border-bottom-left-radius: 25px;
-ms-border-top-right-radius: 25px;
-ms-border-top-left-radius: 25px;
-khtml-border-radius-bottomright: 25px;
-khtml-border-radius-bottomleft: 25px;
-khtml-border-radius-topright: 25px;
-khtml-border-radius-topleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;