Quick Tips for CSS3 Rounded Corner

Rounded corner is one of my favourite properties in CSS3. It actually save us a lot of works in creating them using images and javascript hacks. Mind you, IE 6 - 8 will not able to support it, alternative solution will be required such as javascript hacks.

CSS

The most common use of border-radius

.rounded-corners {
	-moz-border-radius: 20px;			/* firefox */
    -webkit-border-radius: 20px;		/* safari/chrome */
    border-radius: 20px;				/* ie9, future proofing for whatever browser that support this arrtibute */
}

CSS

All other properties of border radius

.custom-rounded-corners {
	
	/* firefox */
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:5px; 
	-moz-border-radius-bottomright:5px; 	

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

	/* ie9, future proofing for whatever browser that support this arrtibute */
	border-top-left-radius : 10px;
	border-top-right-radius : 10px;	
	border-bottom-left-radius : 10px;		
	border-bottom-right-radius : 10px;	
		
}

CSS

Of course, short hand for border radius, quicker, cleaner and easier.

.shorthand {
	
	-moz-border-radius: 20px 15px 10px 5px;
    -webkit-border-radius: 20px 15px 10px 5px;
    border-radius: 20px 15px 10px 5px;
	
}

CSS

Other short hand, it works just like declaring padding: 5px 0px 5px 10px; but they have two set of values, one for the horizontal radii and the latter is for vertical radii. So you can create a different kind of rounded border.

.other-shorthand {

	border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;	/* horizontal radii and vertical radii */
	border-radius: 5px;
	border-radius: 5px 10px / 10px;	

}