Border Radius

Border radius is a CSS3 property that is supported by modern versions of Safari, Firefox and Chrome. It is not supported by any versions of Internet Explorer but it will be included in IE9 according to the preview.

There are some work arounds for Internet Explorer, including DD_roundies which uses Vector Markup Language (VML) and Curved Corner which uses a HTML control file (htc), but from personal experience both these solutions introduce more headaches than they solve. There is also a jQuery plugin which adds 1px high div “strips” to the top and bottom of the element and matches the background colour to give the appearance of rounded corners. The jQuery plugin can be quite effective but the method doesn’t sit right with me, adding all those div elements seems crude and unnecessary overhead for IE to render the page. At the moment we are faced with the rather depressing reality that background images are the best way to achieve cross-platform rounded corners - at least until IE9 is released.

border-radius CSS

.box1 {
	background-color: #f0f0f0;
	padding: 30px;
	margin-bottom: 20px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	-khtml-border-radius: 11px;
	border-radius: 11px;
}

.box2 {
	padding: 30px;
	margin-bottom: 20px;
	border: 10px solid #35b70e;
	-moz-border-radius: 20px 10px 20px 10px;
	-webkit-border-radius: 20px 10px 20px 10px;
	-khtml-border-radius: 20px 10px 20px 10px;
	border-radius: 20px 10px 20px 10px;
}

.box3 {
	background-color: #f0f0f0;
	border: 1px solid #d7d7d7;
	padding: 20px;
	margin-bottom: 20px;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-left-radius: 30px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 5px;
	-khtml-border-top-left-radius: 30px;
	-khtml-border-top-right-radius: 15px;
	-khtml-border-bottom-left-radius: 10px;
	-khtml-border-bottom-right-radius: 5px;
	border-top-left-radius 30px;
	border-top-right-radius 15px;
	border-bottom-left-radius 10px;
	border-bottom-right-radius 5px;
}

Some examples (using CSS3)

Purus, rhoncus augue montes purus porttitor arcu proin augue? Lundium enim turpis, lundium et platea, nisi, urna nisi parturient. Augue scelerisque nisi tristique urna porta magna massa, nunc, lundium pulvinar lundium adipiscing nec, dolor vel lundium. Porttitor! Parturient adipiscing mauris a, porttitor? Dignissim pid. Porttitor egestas turpis nisi, mattis penatibus nunc platea ut penatibus