CSS Rounded Corners In All Browsers (With No Images)

Rounded corner HTML elements using CSS3

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css

.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }

Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc)

More details are on http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

 

Rounded Corners in IE

None of the IEs support border-radius, not even IE8. When Microsoft released IE8, it’s almost as if they tried to catch up with browsers that were out when they released IE7. Don’t get me wrong, they fixed a lot and I wouldn’t trade even something small like display: table-cell forborder-radius.

Fortunately, IE9 will have some CSS3 support, but until then we’ll have to use a border-radius hack in all IEs.

Although this hack is pretty fussy, I’ve gathered a couple guidelines that should help you debug any problems you may have.

First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:

.rounded-corners {
    behavior: url(/css/border-radius.htc);
    border-radius: 20px;
}

The path to border-radius.htc works differently than you may expect—unlikebackground-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.

http://code.google.com/p/curved-corner/