Rounded Corners in IE 6,IE 7,IE 8 (border-radius)

As we all know that Firefox, Safari and Chrome support rounded corners. But IE 6, IE 7 and IE 8 doesn't support this through css. CSS3 comes with border-radius property which provide this rounded corners. I spent days to find a way to make IE to have rounded corners through css. Finally found a nice implementation in Below is the sample usage to make IE support rounded corner through CSS.

Styles :

    behavior: url(pathfrompagetohtcfile/;
    position: relative;
    background: #FFF;
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 
border-radius: 10px 10px 0 0;

Notice that we need a trick that is file which is the magic here. You can find the htc file link at the end of this article. This file is understandable by IE and it does the job we required. In order to work this trick, you need jquery also.


<div class="roundedborder" style="height:50px;">
    This is rounded corner div :)


    <script type="text/javascript" src=""></script>
    <script src="PIE_IE678.js" type="text/javascript" language="javascript"></script>

Demo: demopage
Htc File :
Js File : PIE_IE678.js 


Popular posts from this blog

CSS text-overflow ellipsis in the beginning of the the text - Left Ellipsis using CSS in a Flex box

Selenium With .Net

Handling Exit Event of Console Application in C#