Wednesday, March 11, 2009

Rounded corners with CSS3

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px #cccccc solid;
padding: 10px;

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

No comments:

Post a Comment