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 css3pie.com. Below is the sample usage to make IE support rounded corner through CSS.

Styles :

.roundedborder
{
    behavior: url(pathfrompagetohtcfile/PIE.htc);
    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 PIE.htc 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.

HTML :


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


Javascripts

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="PIE_IE678.js" type="text/javascript" language="javascript"></script>


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


Comments

Popular posts from this blog

Embedding PowerBI with ASP.NET Core 2 and Angular(2,4,5)

Handling Exit Event of Console Application in C#

Taxi - Cab services in Colombo - Sri Lanka