Border radius in Chrome, Firefox and Safari

7/12/2009

Chrome 4 currently appears to be the only browser to implement the W3C’s border-radius property:

http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

border-top-left-radius: 1em;
border-top-right-radius: 1em;

You can produce the same result using proprietary attributes in Firefox 3.5 and Safari 4:

/* Firefox */
-moz-border-radius-topleft: 1em;
-moz-border-radius-topright: 1em;
 
/* Safari */
-webkit-border-top-left-radius: 1em;
-webkit-border-top-right-radius: 1em;

Source: http://www.css3.info/preview/rounded-border/

No comments yet.

Write a comment: