css round corners in firefox, safari and chrome

altis88 — Sun, 01 Nov 2009 14:40:13 +0000

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.

STUDENT AT WORK

css round corners in firefox, safari and chrome