CSS rounded corners done quickly: is this an awful technique?

Question

Here's a quick and dirty round corners technique I've been playing around with.

<!-- assuming the div isn't statically positioned -->
<div>
    <img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
    <img src="box_TR.png" style="position:absolute;top:0;right:0;"/>

    <!-- other content -->

    <img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
    <img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>

Yeah it's ugly, but it's fast, the corners are fluid, it avoids nested divs and requires no javascript. The corner images and content order makes no difference, but I thought it might be more intuitive to order corners and content this way.

Question: How terrible is this technique? Is it passable or should I abandon it completely?

Answer 1

I'd use jQuery Corner Plugin. It's very fast and works in all modern browsers, and also in IE6.

Answer 2

It's terrible. Your markup should be content, and your layout should be in the style. Not intermingled. You should go with:

<div class="whatitis">
   bla blah ... content here
</div>

and the style:

.whatitis {
    background: whatever;
    border: whatever;
    border-radius: 1em;
    -moz-border-radius: 1em
    -webkit-border-radius: 1em;
}

Yes, sure, some browsers won't get rounded corners. But if you hack up a solution that will give properly rounded cornsers even in browsers that does not support that, you will have a complex solution, and odds are that your site will not work att all in some other browsers. So you should ask yourself: What is more important, that the site works at all in some browser X or that you get rounded corners in some other browser Y?

Addition: Using the jQuery plugin mentioned in another answer (or some other pre-packaged solution) might be accepptable. As long as it does not require any extra <div>, <img> or other tags.