Cross-browser CSS3 border-radius (rounded corners)

Cross-browser CSS3 border-radius (rounded corners)

Currently there are multiple variations for creating a HTML elements with rounded corners. The simplest of these is the method that uses CSS3.

Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet Explorer (even IE8) does not support this property.

I very long time was waiting for a moment, when I can safely use the border-radius property on my sites. And this moment has finally has come – now we can make rounded corners in Internet Explorer with his means. This method uses VML and behaviour.

border-radius for modern browsers

This is the way that works in all modern browsers (except IE8) like FireFox, Safari, Chrome and Opera since 10.50 pre-alpha:

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */

border-radius for Internet Explorer

Download the file, put it somewhere on your site, and then use this CSS code:

.rounded-corners {
  behavior: url(;

And replace on your absolute path, where you have placed the file.

I think it’s better to put this CSS in a separate file and connect it using conditional comments:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->


Download crossb-rowser border-radius demo.

Cоmmеnts (102):
  1. 1

    hi… I am using file… its working 5n in ie7,8…but its taking absolute position like the content is coming behind this radiusdiv… I tried to given position:relative and z-index:0 but its is not helping…. pls help me regarding this issue

  2. 2

    Doesn’t seem to do anything in either IE7 or IE8. Have tried both absolute and relative reference, and have tried placing the behavior file in both the root and in a subdirectory. Was getting ‘access denied’ errors, so set the perms to 755.

    Could be I’m missing something in how to call this — it takes no arguments? Does it simply enable the style rules that precede it? Which of those rules are critical?

  3. 3
    livefree75 said:

    Doesn’t seem to work on this site:

    Just makes the DIV disappear.


  4. 4

    Is your DIV disappearing and only displaying content? The answer is: add position:relative to the same DIV – and you’re done!

    • 5
      Maleek said:

      I have add position:relative to the same DIV but still i have same problem ?
      please help me .

  5. 6
    Werner Sandner said:

    Thanks for the codes for the corners. I spend many hours getting it to work on IE8. It also works in Firefox now.

  6. 7
    sarvesh said:

    Thanks for the codes for the corners. Sarvesh Varma

  7. 8
    Bijay said:

    Thanks. I come here everytime I forget this code.

  8. 9

    HTC freezes my server…. for whatever reason…


    if you want the ultimate browser independence, the best way is to skip the whole CSS part and go directly into GD library, check out my demo at

  9. 10

    great, it works for me. awesome. thanks for u

  10. 11
    varun kumar said:

    Its great , working on most of the browsers……

  11. 12

    HTC Is not working myself in my local system.I included it into the a:hover part as
    {behaviour: url(;} Please tell me how?

  12. 13

    Thanks a lot it works like magic

  13. 14
    MoreOnFew said:

    Hi, do u think we can use this to make Twitter Bootstrap’s rounded corner buttons work on IE7 ?

Соmmеnt раgеs: « 1 2 3
© 2009–2022  •  Privacy Policy