Creating rounded corners using CSS [closed]

Answer 1

I would recommend using background images. The other ways aren't nearly as good: No anti-aliasing and senseless markup. This is not the place to use JavaScript.

Answer 2

I personally like this solution the best, its an .htc to allow IE to render curved borders.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Answer 3

I wrote a blog article on this a while back, so for more info, see here

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

It works quite well. No Javascript needed, just CSS and HTML. With minimal HTML interfering with the other stuff. It's very similar to what Mono posted, but doesn't contain any IE 6 specific hacks, and after checking, doesn't seem to work at all. Also, another trick is to make the inside portion of each corner image transparent so it doesn't block text that is near the corner. The outer portion must not be transparent so it can cover up the border of the non-rounded div.

Also, once CSS3 is widely supported with border-radius, that will be the official best way of making rounded corners.