Rounded corners in Internet Explorer

There is a way for rounded corners on css-3 using border-radius . . . however, IE doesn’t support this function — older safari and mozilla browsers need the -webkit or -moz prefixes respectively.

So for everything to work together, we need to include an .htc file for rounded corners to behave properly in IE (Internet Explorer) – the htc file is made and being supported by Nick F. – and you may download it here.

After the download, all you need to make it work is to add these styles:


html,body { position:relative;} /* important if you have a background other than white */
.box1 { background-color:#000; border:1px solid #303030; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; behavior:url(border-radius.htc); } /* the last statement with behavior is where the magic lies */

Make sure that if you put the .htc file in a different folder, that you specify an absolute/relative path to it . . .

And there you go . . . rounded/curved corners in firefox, internet explorer, safari, chrome and what have you . . .

Leave a Reply