This post was most recently updated on August 5th, 2024
How to use border radius for IE-8?
HTML
We can use the ie-css3 file which is a .htc(HTML Component file) file. Just put the file in root folder and can be used as follows:
div {
height: 100px;
width: 100px;
-webkit-border-radius: 10px ;
-moz-border-radius: 10px ;
border-radius: 10px ;
behavior: url(‘ie-css3.htc’);
background-color: #0072AE;
background: #0072ae; /* Old browsers */
}
Note: Please provide the relative/ absolute path to ie-css3.htc file.
You can view a demo here.
WordPress
Using the above solution in WordPress does not work. Why? Well while accessing the .htc file the server cannot find content type of the file that can be set through a php file and then included in the header as:
div{
behavior: url(/absolute-path-to-ie-css3.php);
}
|
1 2 3 |
<?php header( 'Content-type: text/x-component'); include( 'ie-css3.htc'; |
OR
Simply you can use WordPress plugin WEN’s IE CSS3 Support.
Hope either of the solution helps! 🙂
