Having a rounded corners in your webpage is a great element to make your page distinct from other webpage. Since the introduction of CSS3, rounded corners become much easier to implement. However, CSS 3 is not supported by Internet Explorer 6, 7 & 8. This creates an major obstacle to adopt CSS3 on round corners implementation. However, there is a simpler solution which make Internet Explorer 6, 7 & 8 work perfectly with CSS3 rounded conrner element.

How to apply rounded corner on Internet Explorer 6, 7, 8??

Assume that you have a HTML document and you have one element want to have rounded corner. And you would create HTML and CSS like below:

1. Create HTML element

<div class="box1">

 

2. Write CSS3

Normally, to created an rounded corner element, we have to add -moz-border-radius , -webkit-border-radius & border-radius elements. (Note: -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in WebKit and Mozilla-based browsers)

3. Apply PIE

In order to make rounded corner work in Internet Explorer, we need to added to line "behavior: url(PIE.htc);". The PIE.htc is a special file which specially create for Internet Explorer to render Rounded Corner. And the file can get from here. You have to upload the PIE.htc file to your web directory. After that, adjust the path on above to match where you uploaded your PIE.htc. (Note: this path is relative to the HTML file being viewed, not the CSS file it is called from)

4. View in I.E.

Now, you can load the page in IE and see the CSS3 rounded corners rendered like other browsers. Or you can view the demo page.

Rounded Corner view by Internet Explorer 7

Rounded Corner view by Internet Explorer 8

Tags: CSS