Recently created a WordPress theme where I wanted rounded corners around text boxes, buttons, and forms. Being not too patient with the creation of little corner images to satisfy this requirement within Internet Explorer, I decided to use the -moz-border-radius within the stylesheet. The drawback is that this -moz-border-radius will only work within Mozilla based Internet explorers and not the Microsoft Internet Explorer. I found a “solution” or two, however after some trial and error, figured a solution that worked for me. It is PIE.

Progressive Internet Explorer (‘PIE’) makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

There are many different configurations, however, these are the steps I used to incorporate PIE into my WordPress theme. You will need to edit the functions.php, header.php, and style.css files of your theme.

• Download PIE.
• Extract PIE to your theme folder into its own folder, in my case …\wp-content\themes\mytheme\pie\
• Edit your functions.php file within your theme folder, mine was …\wp-content\themes\mytheme\functions.php
  I used this forum discussion as my source.

function my_render_ie_pie() { ?>
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#header li a, #header form .searchtext, #sidebar, .navig, textarea#comment {
behavior: url('<?php bloginfo('stylesheet_directory'); ?>/pie/PIE.htc');
}
</style>
<![endif]-->
<?php
}
add_action('hybrid_head', 'my_render_ie_pie', 8);

• Substitute the #header li a, #header form .searchtext, #sidebar, .navig, textarea#comment from the above code with your sections of your style.css that you wanted rounded edges. In my case, it was where all instances of -moz-border-radius are located.
• Edit your header.php file to add this code. I used this forum discussion as my source.

<?php if(function_exists('my_render_ie_pie')) : my_render_ie_pie(); endif; ?>

• Edit your stylesheet, style.css. Add -webkit-border-radius: 10px; border-radius: 10px; to wherever you have -moz-border-radius: 10px;
  This is my source. Here is an example of a piece of style.css.

#comment {
overflow: auto;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
}

After editing these three files, the edges are round in both IE8 and Firefox. Tested as working with WordPress 3.01 and above. Tested and not working with same themes in WordPress 2.92.

Alternately, this will work if your theme has in the header.php or similar negating the need for the php if statement above.

function my_render_ie_pie() { ?>
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#header li a, #header form .searchtext, #sidebar, .navig, textarea#comment {
behavior: url('<?php bloginfo('stylesheet_directory'); ?>/pie/PIE.htc');
}
</style>
<![endif]-->
<?php
}
add_action('wp_head', 'my_render_ie_pie', 8);