Border Radius Reference

Full reference for khtml, moz and webkit + CSS3 rounded corners.

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

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

Comments

Wow.

A simplified way to write it out

An easier way to write this out for making rounded css corners is to have it like this:

.roundedelement {
border:3px solid #E7E7E7;

-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

This will make a 3 pixel thick border and rounded at 5 pixels equally in each corner, but if you want to make each corner customized then you can do so by using the code from the original post, but that wouldn't be written out as short and simple as this example.

...

This is covered in the original post - see the top example code block :)

With border-radius and -moz-border-radius you can use a shorthand for different radii on each corner, but for webkit and khtml you must declare the longhand versions, for example say you are setting an 8px rounded corners on tabs - so you want top-right and top-left to be rounded but bottom-right and bottom-left to be not rounded (all values follow the standard clockwise method in CSS starting with top-left):

-webkit-border-radius: 8px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-khtml-border-radius: 8px;
-khtml-border-radius-bottomright: 0;
-khtml-border-radius-bottomleft: 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;