CSS Rounded corners using Divs as corners

Question

I'm thinking of creating a custom made rounded corners block using only divs, and I was curious to know what you guys think, if that's a good enough approach, or is there an easier way to get a cross browser support (While also supporting older browsers such as IE6)

I'll write a little simple explanation code for you guys to understand easily:

<div class="Block" style="position:relative">
    <div>
    Content will go here or something
    </div>
    <div name="TopLeft" style="position:absolute;top:0;left:0;"></div>
    <div name="TopRight" style="position:absolute;top:0;right:0;"></div>
    <div name="BottomLeft" style="position:absolute;bottom:0;left:0;"></div>
    <div name="BottomRight" style="position:absolute;bottom:0;right:0;"></div>
</div>

In the real code, I'll give each one of them a background, and of course put it in a css file instead of writing it inline like that.

Answer 1

Use CSS3Pie .

This is a Javascript hack for IE that implements the border-radius CSS in old versions of IE.

Answer 2

If you need rounded corners in IE6-9 browsers you only need to use CSS3 border-radius and one PIE.htc file

Progressive Internet Explorer

div{ border-radius: 6px; -moz-border-radius: 6px; behavior: url(PIE.htc); }

This works best in all IE browsers

Answer 3

Yes, that will work fine.

You can also add the elements using script, that will make the markup cleaner. I use that approach here: bytbil.com

Answer 4

Doubt it will work in IE6, but you can use the following:

-moz-border-radius: 15px;
border-radius: 15px;

Put that in your CSS for a DIV and it will support most browsers, but again, not sure about IE6... It does definitely work on IE9, Safari (5+), FireFox(1.0+), Chrome(5+) and Opera(10.5+)...

Answer 5

I guess this would work, and it's as good as anything to support IE6.

Any solution that covers IE6 is bound to be an awful hack. I think it's really worth it to wonder if you really need it. I would prefer just using css rounded corners and let the chips fall where they may.