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/
Good article. Thanks mate, I got it work now!
I recently ran into issues trying to get curvy corners to play nicely with Word Press. I got it working finally.
Firstly I had added my rounded corners to the bottom of the css file, around 2500 lines of css for curvy to traverse. I moved the css with corners to the top of the file and that fixed most of the issues.
The last issue I had is that the nav menu li elements were not rendering correctly. I discovered the the default javascript include html5.js was causing curly to trip over. I removed that and all was well.
Anyway hope this helps someone, I just wasted 3 hours of my life I ain’t getting back!
Shaun.
I don’t know if anyone can help, but I had a website done in wordpress and the curvycorners script with the rounded corners defined in the stylesheet and the enqueue, the call in functions.php – worked fine for a year then suddenly after upgrading FF to 13 and then immediately to 15 the rounded corners are gone. The javascript doesn’t get called and the css doesn’t seem to be working anymore. It works just fine in Chrome and Safari but not in IE and FF13/15. Did something change in FF15 to make it not work anymore or what? I haven’t changed anything else. No plugins, nothing.
Any idea what could be wrong?
If you’re still using curvy corners, you should probably only be loading it for old versions of IE. Firefox and other modern browsers can handle rounded corners natively. I’ll update the post to show how to conditionally load.