Search

Change Language

Tuesday, March 1, 2011

Rounded Corners in Internet Explorer (CSS & CurvyCorner script)

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.


The CurvyCorners JavaScript


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


you can download  curvycorners.src.js From Here
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);
});

MooTools + Curvy Corners

CurvyCorners is known to brick your MooTools code. The trunk code fixes those issues.
Don't let Internet Explorer's refusal to implement rounded corners via CSS keep your
websites from being as dynamic as possible! CurvyCorners helps make rounded corners in IE
possible!




0 comments:

Post a Comment