CSS3 gives us the ability to create rounded corners with the border-radius property. But as you might already know, this new feature is not recognized in Internet Explorer 8 (IE8) and its earlier versions. So when you apply CSS3 Border Radius to an element, it still appears as a box with pointed tips.
You may find a lot of different advice on the Internet suggesting you ignore IE8. You wish you could do so. But if you’re working on a website for a government institution or a bank, you may not have a choice. You still have to make the website look as nice as it does in modern browsers, which includes the ability to apply CSS3 Border Radius.
If you really have to make your website IE8-ready, while being able to use the CSS3 feature, we have just the tip for you.
Recommended Reading:Beginner’s Guide to CSS3
CSS3Pie
CSS3Pie is a kind of polyfill for CSS3 decorative features. Aside from CSS3 Border Radius that we’re going to discuss in this article, CSS3Pie also supports Box Shadow and Gradients, though it’s limited to the Linear Gradient type.
Download CSS3Pie (here). Put it inside your project directory – I placed it in the css folder. As you can also see from the screenshot below, I’ve created one stylesheet as well as one HTML file.
Open the stylesheet in code editor and set one of the elements in the HTML file with rounded corners, like so:
|
1
2
3
4
5
6
7
8 |
.border-radius {
height: 100px;
width: 100px;
background-color: #2ecc71;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
|
As the element’s width and height are both 100px, and the border-radius is set to 50px, the element will become a circle:
In IE8, as we expect, it would still be a square (sigh), but don’t worry.
To enable the rounded corner effect, insert this line: behavior: url(css/pie.htc);, like so.
|
1
2
3
4
5
6
7
8
9 |
.border-radius {
height: 100px;
width: 100px;
background-color: #2ecc71;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
behavior: url(css/pie.htc);
}
|
Note that the file path in url()has to be either an absolute path or relative to the HTML file. You can also add this line in a separate file.
You may have a stylesheet that is designated for Internet Explorer. You can put behavior: url(css/pie.htc); within that file, but ensure that it’s declared within the same CSS selector, like so.
|
1
2
3
4 |
.border-radius {
behavior: url(css/pie.htc);
}
|
Refresh the page in IE8. The rounded corner should now come into effect (ta-da!). It should work in IE7 as well.
Troubleshooting
Internet Explorer may behave unexpectedly. If this does not work (maybe the rounded corner does not take effect, or the selected element has disappeared), adding the position and zoom property should solve the problem:
|
1
2
3
4
5
6
7 |
<style>
.border-radius {
behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
position: relative;
zoom: 1;
}
</style>
|
Using CSS3 Pie in WordPress
You have finished putting your website in HTML form. You also utilize pie.htc in the website to enable CSS3 in IE8. At this stage, you are ready to transform the website into a functioning WordPress theme. In this case, as WordPress is dynamic, where pages may serve in different level URLs, we have to specify an absolute path.
You can either change the path in CSS like this:
|
1
2
3
4
5 |
.border-radius {
position: relative;
zoom: 1;
}
|
Or add internal styles in the header.php, this way:
|
1
2
3
4
5
6
7 |
<style>
.border-radius {
behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
position: relative;
zoom: 1;
}
</style>
|
Final Thought
Having cool things such as CSS3 Border Radius work in IE8 is fascinating, and CSS3Pie makes that happen, while giving us one less reason to hate IE8.
