Getting border-radius to work in IE
Border-radius on IE? That is just crazy!
It’s funny how many things from my job come up as posts. Well, I guess not funny, because I end up working on things that I am not familiar with and have to fix. Which is the case tonight. I’m not sure if you have read any articles, but there are plenty, about getting the CSS3 property border-radius to work in IE. It is actually rather easy, so let’s get to it, and I’ll show you how!
Actually, I’ll tell you how. And then I’ll tell you some of the troubles I ran into.
Wait, that’s it?
So getting your rounded corners is pretty damn easy. There are three things you have to do:
1) Go here and download the htc file.
2) Place the downloaded file in your images folder
3) In your CSS file, on the style that you want the rounded corners you add something like this:
.roundedClass { -moz-border-radius:10px; -webkit-border-radius:10px; behavior:url(images/border-radius.htc); }
This being the important part:
behavior:url(images/border-radius.htc);
Where ever you are using the border-radius properties, you want the behavior added as well. Note that this does not work at all on anything in a form. So inputs, buttons, whatever…if it is in a form, I could not get this damn thing to work. Also, make the path in the behavior line relative to the document NOT the CSS file. Got it? If for instance, the .htc file is in the images folder and you are dealing with a root level document, then it would be images/border-radius.htc. If you have any questions about this, post a question in the comments section.
IE8 is not very nice – pay attention here!
I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:
<div class="roundedClass"><p class="textClass">This is the text that goes on top of the rounded corners div</p></div>
If you did this:
<div class="roundedClass">This is the text that goes on top of the rounded corners div</div>
Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.
To conclude
Have two wrappers (elements)…both positioned relative, the outer has the behavior and border-radius properties. Piece of cake. This works in IE6-8, and once I figured out the two wrappers and position relative thing, everything worked beautifully. Again, if you are still confused, ask away!
I will leave you with a quick tip. If you have multiple tabs open in IE8, press ctrl+q. It will show all the tabs you have open in one window, which you can then pick the one you want to view. Works kind of like Apple’s Expose. I wish I had known that a while back. It is actually a feature that they should have been promoting more. Especially considering that FF4 will have this feature now as well.
Coupon Code: webmachine
jQuery junkBox
.detach();
This method will remove the matched elements from the DOM. Works kind of like .remove(), only that it keeps all the data associated with the removed elements in case you want to reinsert them back in later. So below would remove the unordered list from the element with an id of ‘wrapper’.
$('#wrapper').detach('ul');
[...] little while back I wrote an article about getting border-radius working in IE. Well, if you haven’t been keeping up in the blogging world, I came across CSS PIE. It [...]
Hey Jeremy. Think you could show some images or a link to a demo using this feature?
if it is so easy then why aren’t the rounded corners implemented in the css on this page ??????
Fair enough question Paul. The answer being that I didn’t use it on this blog, therefore you won’t see the rounded corners in IE. I started this blog at the beginning of 2010 I believe (might have been end of ’09), and I didn’t know of any techniques at the time to do it. I wrote an article later on about CSS Pie which I prefer using over this method. I will add the rounded corners for IE using Pie tonight so you can see it working. Read this article though for how to use CSS Pie: http://jc-designs.net/blog/2010/08/css-pie-css3-styles-for-ie/
Hi ..
i prepared a demo using htc file its working fine but when i prepared same demo in Virtual machine its not working there why ??
Any Sugessions!!!!
Thanks
All I can think of is maybe the path to the htc is different on the Virtual machine? No idea really. I have switched to CSS3 Pie for this though. I would use that instead of this method. I wrote an article on it you can read at: http://jc-designs.net/blog/2010/08/css-pie-css3-styles-for-ie/
[...] Getting border-radius to work in IE | jc-designs.net [...]
Hi,
thank u for the solution. I have tried the demo . its working fine. in my asp.net page, i have a close button in modal popup. i need to display it only when i show the popup. here is the css for close button.
.btn_close {float: right;margin: -55px -55px 0 0;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:3px solid #ad2d24; width:18px;height:18px;behavior:url(Images/border-radius.htc);display:none;}
i have Ie9. when i run in IE8 mode using developer tools, it says “invalid argument in rect.style.width = rect_size.width +’px’; in this line (line number:87). if i comment that line, again it shows error in “var strokeWeight = parseInt(el.currentStyle.borderWidth);” in window_resize event (I closed Developer tools at this time)…
can you please guide me abut what i am doing wrong?
pls help..
Do you have a link I can see this happening in?
I get the same error in IE 8.0.76 on the same line.
Same error, same place for me.
It work in the case of div ,but I want to set border radius for images in IE8