Rounded corners in IE

I’ve found a small and lightweight solution for rounded corners in IE:

http://www.htmlremix…-cross-browser.

A little bit css, a htc-file (never heard before). Thats all.

Now you only have to add the “curved”-class to get divs with rounded corners in FF & IE.

The demo: http://www.htmlremix…rder-radius.zip

The newest file should solve problems with IE8, but my IE 8.0.6001.18702 doesn’t like it. I use file from the demo.

I’ve added a zip-file with a yii-project. The login-div should be shown as rounded.

Greetings

Carsten

EDIT: IE is a real pain. Maybe it is needed to force IE8 to emulate IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

I tried this, however with a div with 1px padding that has another div inside it (which simulates a border - from the blog tutorial portlets) it screws up.

This jQuery solution works nicely however: http://plugins.jquery.com/project/corners

  $(document).ready(function(){

    $('.portlet').corners("7px");

    $('.content').corners("bottom");

  });

It does pad out at the bottom of the box, however I think it looks nice.

Does it also work with Opera?

Yes it does. In Opera it renders the same as in IE, that is, if your boxes are the same as the portlet boxes in the blog tutorial, the inside content div is padded at the bottom to whatever your portlet div corner radius is. This looks quite ok, see below:

  $(document).ready(function(){

    $('.portlet').corners("7px");

    $('.content').corners("5px");

  });

jconner is really cool, except that it doesn’t work will with Google Chrome. Checkout www.playersrepublic.fr

Try this: http://www.curvycorners.net

Here is a possible solution: jcorner widget