Rounded corners with CSS

Upon creating this site I realized that there are three different families of CSS-tags that can be used for generating rounded corners. One for CSS3, one for Mozilla and one for Webkit. CSS3:

div#round{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-radius: 10px; //All corners at once
}

Mozilla:

div#round{
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-tadius: 10px; //All corners at once
}

Webkit:

div#round{
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-radius: 10px; //All corners at once
}

They are very similar and yields the same visual result and can be combined for multi-browser support.

div#round{
	border-radius: 10px;
	-moz-border-tadius: 10px;
	-webkit-border-radius: 10px;
}

Write a comment