S

HTML and CSS Fluid Transparent Rounded Corner Boxes

May 2nd, 2010

That’s quite a lot to demand of a title, and a box on a website as well it seems. In my work I have had a couple of designs lately that have required me to think up a good and solid way of having four rounded corners in a box that is one of a couple of things:

  • Totally fluid, as in it resizes in both axes in accordance with changing content size.
  • Each corner needs actual transparency to sit on gradient backgrounds.

There are hundreds of methods posted online about how to do fancy corners on boxes using CSS, but quite a lot of them just don’t have transparency involved, or worse still use a hack here and there or use a sprinkling of absolutely positioned, empty divs.

Fluid rounded corner box example image

So what to do about the boxes having exhausted quite an extensive Google search and not finding a method that really suited me? Make one up of course. For those of us still stuck supporting IE6 as well as a raft of other browsers and their various editions, while offering a text resizing facility on the site, this meant it has to be remarkably robust.

The following method is the one I made for four corners only, with no border fanciness. In fact the graphical requirements were so simple that actually all the corners are the same GIF file as a ball, used much like you would a sprite: GIF corner sprite

/* White boxes */
div.box {
width: 100%;
margin: 0 0 10px 0;
overflow: hidden;
background: url(../images/common/corners.gif) no-repeat top left;
}
div.box div {background: url(../images/common/corners.gif) no-repeat top right;}
div.box div div {background-position: bottom left;}
div.box div div div {
background-position: bottom right;
padding: 6px 0;
}
div.box div div div div {
padding: 0;
background: #fff none;
position: relative;
}
div.box div div div div div {
margin: 0 8px;
top: -6px;
}
div.box div div div div div div {
margin: 0;
top: 12px;
}
div.box div div div div div div div {
top: -6px;
overflow: auto;
background: none;
width: 100%;
}
div.box div div div div div div div div {
top: 0;
width: auto;
padding: 0;
}

And then the XHTML:

<div class="box"><div><div><div><div><div><div><div>
<strong>Some sample content<br /><br />
Additional lines.</strong>
</div></div></div></div></div></div></div></div>

Resulting in something like this:

Rounded corner CSS and XHTML box example

Because I haven’t used floats or any form of containment yet this box will just happily expand to fill the width it is in, and will grow with the content inside it just like a div tag ought to. However you might like to float the outer div or give it a width in EM or percent to make use of this fluid-ness. It can be easily adapted and expanded for many cornered box purposes, since with a bit of additional markup I made one with a solid rounded corner border all the way around.

Posted in Web Design by Simon

If you enjoyed this journal entry you may also find the following entries interesting:

Add Comment Add a Comment

Latest Journal Posts

RSS Feed

Additional