Flexible box with custom corners and borders

This will be the last thing I write about boxes with rounded corners, custom borders or dropshadows for a while. I promise ;) Next time I’ll write about something else.

Here’s a way to make a flexible box with custom corners and custom borders. The box will expand to contain any amount of content vertically, will handle any text size, and can become very wide before the horizontal borders start breaking up. How wide depends on the width of one of the background images.

Two images are used. box.gif is a complete box, with all corners and borders. For the sake of this demo I’ve made it 1600 pixels wide. It is used for the corners and the horizontal borders. The other image, borders.gif, contains the vertical borders.

Some extra markup is needed to put the corners and borders in place. A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal, and won’t get in the way if CSS is off, so I think I can live with it. It is possible to get rid of some more markup by using the :before and :after pseudo-elements, but since Internet Explorer doesn’t support them I’ll leave the extra markup in there.

The main content area of this box can be filled with any elements you like, as long as their background colour is set to white (or whatever colour the inside of your box has), and their margins are zeroed. If the content is transparent the left border will be doubled because the image used to create it also contains the right border. You can avoid the need for that by splitting the image in two, or adding an extra div to put all your content in.

View source on the Flexible box with custom corners and borders demo page to see the XHTML and CSS used.

Posted on June 25, 2004 in CSS