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.