Monday, October 24, 2011

easy rounded corners

So, probably old news to most developers here...

IE should be ashamed at not supporting any standards for CSS rounded corners up 'til the very recent IE9.  Rounded corners looks better, designers are always asking for it, and faking 'em is generally a pain in the ass, involving polluting simple design with gratuitous graphics and/or ungainly structure.

The easiest solution to this is the jQuery Corner Plugin. In its simplest form you include the library:
<script src="/path/to/jquery.corner.js"></script>
and then something like this when the page loads:
document.ready(function(){
  $(".selector_for_class").corner();
});
Unfortunately, you might get a small flash of square corners 'til the document ready kicks in, unless of course you're hiding items with a loading type screen. 

The defaults for rounded-ness are well chosen, but if you want many more options you can check out the demo page

The library uses native rounded corners where available (there were a few different standards, alas) and graphics for earlier versions of IE. In practice you sometimes get into trouble on older IE if the div is over a complex background.

Still, easy-peasy, and 9 times out of 10 it looks just great.

No comments:

Post a Comment