I prefer using CSS3 properties whenever possible to make rounded corners on a website. But if it’s absolutely necessary to have rounded corners with Internet Explorer, I sometimes use the Curvy Corners javascript. You can download the script from the www.curvycorners.net website. If the CSS3 properties are defined for rounded corners with Firefox and Safari, this script will automatically apply them to IE browsers.
This script has a bit of overhead and can slow the load of your site, but it often beats coding for substandard browsers. To use it in your WordPress theme, add this code to your functions.php file:
function load_curvy_corners() {
wp_enqueue_script('curvycorners', get_bloginfo('stylesheet_directory') .'/scripts/curvycorners.src.js','','',true);
}
add_action('init', 'load_curvy_corners');
Make sure that the script path is defined correctly- for this example I put the curvy corner script in ‘/scripts/curvycorners.src.js’, but you can put it wherever you want in the theme folder. Since this script is loaded in the footer, you’ll also need to make sure that the wp_footer() hook is in your theme.
If you have trouble getting it to enqueue, for whatever reason, you can also just paste it into the head:
<script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory'); ?>/scripts/curvycorners.js"></script>
I’ve been using jquery.corner and DD_roundies.
Is there any difference?
With jquery corner, there is sometimes a flash of square corners when the page is loaded.
I haven’t used the DD-roundies yet, but someone else suggested it too. I’ll have to try it on the next project- but if possible I’d rather just avoid using rounded corners in IE altogether.
yeah me too, but clients don’t see it that way :)
Oh man what a cool solution! Really sucks that it wont work in IE. I looked at DD-roundies briefly but couldn’t immediately grok how to integrate into WP/Thematic.
Excellent Tip, Devin ! Many Thanks for the download link. My problems should be solved now.
It looks to me like one of the differences between jquery.corner and CurveyCorners is the implementation of CurveyCorners with it’s CSS invocation method allows us to retroactively add this to a theme without modifying the HTML making it much easier to add rounded corners to a Worpress theme.
woohoo, works! just what I was looking for, thanks.
I was having problems getting this to work with twenty-ten theme that comes with WordPress 3.0. I found another tip that said to put “” in the header.php file. That seemed to work fine. Just thought I’d add the tip here in case it helps anyone else.
Thanks Ian, but I think your code got cut out. You can e-mail it to me at devin[at]wptheming.com and I’ll add it the post.
Hmm… I added your code to the post, but it the enqueue is definitely the best method. I’m not sure why it didn’t work for you. Did you check that your file path was correct? (When you viewed the source, did you see the code calling curvy corners, and when you clicked on the script url did it load are the correct filepath?)
Devin,
I updated you, but there seemed to be some IE problems with that method I asked about. I contacted you again with some details on my functions.php to see if we can get your method working. Thanks.
The two different ways of loading the script should give you the same result to the end user. The only difference it would cause is the order in which that script is being loaded. So, if you are having a different result for some reason between the two methods, it likely means another script is conflicting.
Try disabling all your plugins, and removing any extraneous js code for debugging. Sometimes it’s helpful to just use a flat version of the file (non-WordPress generated), so you can drill down and see where the conflict is.
Good luck. Curvy corners is a finicky script.
I was able to get the script to load in the footer via the functions.php file, but only some of the elements on the page are showing the curvy corners – the menu bar and the black bar in the center of the page. But the grey border around the image, and the border around the grey box on the right are not displaying with the curvy corners. Any ideas? http://www.moongoosedesigns.com/quantum/about-the-company/our-team/tyler-turquand/