Thursday, August 21, 2008

More CSS tips

Continued from yesterday...

Firefox 3 and Safari both support rounded corners in CSS (now if only IE would catch up).

You can use the following tags.

-moz-border-radius: 3px; /** for Firefox **/
-webkit-border-radius: 3px; /** for Safari/webkit **/

If you use these tags on a div it will be rounded in FF or Safari and display square in IE.

If you only want to round some of the corners (as opposed to all of them) here is the additional syntax in an example (where I rounded the top corners only).

-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;

No comments: