STUDENT AT WORK

css round corners in firefox, safari and chrome

Posted by: altis88 on: November 1, 2009

This is a easy way for adding round corners with simple css. Both of them will only work with firefox , safari and chrome. This help you nott spending the time making custom graphic images or using javascript.

exemple 1: Individual corners

/* safari */
webkit-border-top-right-radius: 3px;
webkit-border-bottom-right-radius: 3px;
webkit-border-bottom-left-radius: 3px;
webkit-border-top-left-radius: 3px;

/* firefox */

moz-border-top-right-radius: 3px;
moz-border-bottom-right-radius: 3px;
moz-border-bottom-left-radius: 3px;
moz-border-top-left-radius: 3px;

exemple 2: Overal corners

-webkit-border-radius: 3px;
-moz-border-radius: 3px;

exemple 3: Individual corners shorthand

-webkit-border-radius: 3px 5px 3px 3px;
-moz-border-radius: 3px 5px 3px 3px;

exemple 4: Individual corners shorthand

-webkit-border-radius: 10px 5px;
-moz-border-radius:
10px 5px;

I hope this tutorial whas usefull to you.

Categories

altis88

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Follow

Get every new post delivered to your Inbox.