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