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

you'll come into issues with IE6 using PNGs so you will either need to add the correct CSS filter background to divs instead of images or use javascript to help turn the png images into transparent gifs with the png background added.

http://www.twinhelix.com/css/iepngfix/

Answer 2

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

Answer 3

It's a terrible solution, sorry :-)

It's true that you don't need any JavaScript or nested div elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant img elements better than a few nested div elements? The img element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.

If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):

The markup

<div class="boxWithRoundedCorners">
    <div class="roundedCornersTop">
        <div class="roundedCornersTopRight"></div>
    </div>

    <p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>

    <div class="roundedCornersBottom">
        <div class="roundedCornersBottomRight"></div>
    </div>
</div>

The CSS

.boxWithRoundedCorners { background: red; }
.roundedCornersTop { 
    background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
    height: 20px;
}

.roundedCornersTopRight {
    background: url(topRightImage.gif);
    width: 20px;
    height: 20px;
    float: right;
}

.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
    height: 20px;
}

.roundedCornersBottomRight {
    background: url(bottomRightImage.gif);
    width: 20px;
    height: 20px;
    float: right;
}

Got it? Hang on, I'll put up an example somewhere :-)

Edit: Just threw up an an example!

Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners. Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.

You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.

This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.

Answer 4

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.

Answer 5

If the box is fixed width, then there's an interesting trick you can do which works in IE8 and the rest (but not IE7-):

div.rounded {
  width: 600px;
  padding: 0 10px;
}

div.rounded:before,
div.rounded:after {
  display: block;
  content: "";
  width: 600px;
  height: 10px;
}

div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }

Unfortunately this doesn't work with anything that has a fluid width, and it's not copatible with older IE browsers, but I still like it :)

Answer 6

This is a very old topic, but since it's re-appeared on the front page, I'll add a comment.

In the last few months, a new solution has appeared for rounded corners, which solves the issue for all relevant versions of IE (6,7,8).

CSS3Pie is a 'hack' for IE which allows you to set up rounded corners in your CSS and not worry about it anywhere else. At a stroke, you can throw away all those extra divs in your markup and those jquery plugins, and just specify it in your stylesheet the way it should be.

All other browsers support rounded corners in CSS, and have done so for long enough that you don't need to worry about older versions.

CSS3Pie also helps with CSS gradients and box shadows in IE too, so it's a very big win for cross-browser developers.