Getting border-radius to work in IE

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');

Tags: ,

21 Responses to “Getting border-radius to work in IE”

  1. [...] 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 [...]

  2. Hey Jeremy. Think you could show some images or a link to a demo using this feature?

  3. paul says:

    if it is so easy then why aren’t the rounded corners implemented in the css on this page ??????

    • jcDesigns says:

      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/

  4. Cindrella says:

    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

  5. [...] Getting border-radius to work in IE | jc-designs.net [...]

  6. please help, i felt pbms in ie8 says:

    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..

  7. kalloo says:

    It work in the case of div ,but I want to set border radius for images in IE8

  8. priyanka says:

    Hi,
    I have downloaded the htc files and placed that file in images folder and I have modified my css also but its not working in IE8.0.76.

    Actually my problem is we are developing a new site in that site we have a login box with gradient for that we are applying border radius but it is not working. Requesting you to check the home page of our site and kindly please help us. our site is caremanagers.in

    Thanks in advance,
    Priya

    • jcDesigns says:

      Thanks for the comment Priya. First I would use http://css3pie.com/ instead. I wrote this article a while ago, and I think Pie is the better option. Second, if I remember correctly, neither of these options work on inputs. You might be out of luck with that.

      • priyanka says:

        I even trie csspie also but it didnt work. i cant uderstand what the exact problem is. may i know where to place the .htc file in our project file ? i think i went wrong in placing the file in my project.

      • priyanka says:

        And one more thing do we need to place the php ,js file and two more files which are there in the downloaded csspie folder or pie.htc is enough?

        Thanks in advance,
        Regards
        Priya

  9. jcDesigns says:

    You place the htc file wherever you want, and write the css so that the path to the htc file is relative to the html file (http://css3pie.com/documentation/getting-started/).

    • priyanka says:

      Thank u.
      One more thing i want to clarify, I want to send email to an account from html file, for that i wrote

      its wrking but it is sending the mail using ms outlook. Please get me out of this problem..

      thanks in advance,

      • jcDesigns says:

        I’m guessing you are using mailto:youremail@address.com, right? Not gonna happen as far as I know. You would need to use something like a simple php processing form. Google that, and you’ll find plenty on how to do it.

  10. Aliarth says:

    WOW, very goog work that JS script. But one problem, that script not understand:
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    :(

Leave a Reply