Not Rated!

Rounded Corners in Internet Explorer

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS:

 .round	{ -moz-border-radius:12px; -webkit-border-radius:12px; }  

As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer.

 <!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>  

CurvyCorners detects the usage of “-webkit-border-radius” and “moz-border-radius” on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to:

 var settings = {
			tl: { radius: 12 },
			tr: { radius: 12 },
			bl: { radius: 12 },
			br: { radius: 12 },
			antiAlias: true
		 };
/* moooo */
$$('.round').each(function(rd) {
	curvyCorners(settings,rd);
});  

Demo: http://davidwalsh.name/dw-content/curvy-corners.php
Source: http://davidwalsh.name/rounded-corners-ie

Related Listings:

1. Curvy Corners Script The following instructions will round the corners of a DIV…
2. GoodCorner – Rounded Corners with Mootools GoodCorners is a tiny Mootools plugin that can apply the…
3. Anti Aliaised Curvy Round Corners Script The “Curvy corners” script was orgionally developed by Cameron Cooke,…