Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

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 border-radius.htc file, put it somewhere on your site, and then use this CSS code:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

And replace http://yoursite.com/ on your absolute path, where you have placed the border-radius.htc 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]-->

Demo

Download crossb-rowser border-radius demo.

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

    hi… I am using border-radius.htc 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. 88

    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. 89
    @
    livefree75 said:

    Doesn’t seem to work on this site:
    http://jkpittman.com/commchapel/FW%20-%20Home%20Page%20Mockup/test.php

    Just makes the DIV disappear.

    Help!

  4. 90

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

  5. 91

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

  6. 93

    Thanks for the codes for the corners. Sarvesh Varma

  7. 94

    Thanks. I come here everytime I forget this code.

  8. 95

    HTC freezes my server…. for whatever reason…

    Actually,

    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 http://labs.greeni.pl/mini/

  9. 96

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

  10. 98

    Its great , working on most of the browsers……

  11. 99

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

  12. 100

    Thanks a lot it works like magic

  13. 101

    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
Lеаvе а Соmmеnt

© 2009–2014 Dimox.net  •  Privacy Policy