Border Radius

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

1 -moz-border-radius: 20px;
2 -webkit-border-radius: 20px;
3 border-radius: 20px;

Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:

1 -moz-border-radius-topleft: 20px;
2 -moz-border-radius-topright: 20px;
3 -moz-border-radius-bottomleft: 10px;
4 -moz-border-radius-bottomright: 10px;
5 -webkit-border-top-right-radius: 20px;
6 -webkit-border-top-left-radius: 20px;
7 -webkit-border-bottom-left-radius: 10px;
8 -webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome.