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.

View the flexible box with custom corners and custom borders demo 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

Comments

  1. Nice looking box and failry simple markup. Nice stuff…

  2. Nice! Could you possibly avoid the forcing of a white bgcolor in the inside by flipping the gifs in a way, that the outer edges touch each other instead of the inner. So that you could use something like the sliding doors technique to hide the unnecessary parts?

  3. June 26, 2004 by Roger (Author comment)

    Bernhard: I don’t think that’s possible, since you’d have to somehow offset the background for the right edge a certain number of pixels (half of the image width) to the right. If you know the width of the box it can be done, but I can’t think of a way that will work with a flexible width. If anyone figures out how to do it, please let us know :)

  4. June 29, 2004 by essie

    Cool stuff!!

  5. I am already using it on my website !

    Thanks !

    Sadish

  6. Where did you hide the rounding error? I can’t seem to find it anywhere! Don’t tell me we now have a 4-corners-and-sides sliding BG method that is actually x-browser?! That CAN’T happen! :D

  7. August 19, 2004 by Ethan

    Great little trick…though I’ve got a silly question. Why does the border.gif image appear whenever I’ve got a <p> tab in the box. Probably somehting completely obvious. Cheers, Ethan

  8. August 19, 2004 by Roger (Author comment)

    Ethan: Sounds like you didn’t give the <p> element a background colour. All elements in the box need to have a background colour (in this case white) to hide the background image.

  9. Hey Roger. I know this is an old article but I just saw the link from your end of 2004 post so I’m guessing others might be reading it for the first time as well. It’s a cool technique, and I just wanted to comment on the issue of using a gigantic background file, or rather the non-issue of using it. I’m sure you’re aware of this, but I want to point it out for other readers that may not be.

    Gif images don’t store information for every pixel the way other bitmap formats do. Part of the magic of gif compression is that it scans the image in a vertical fashion for duplicate columns. After the pixel information for the first column is saved, successive duplicate columns store a reference to that column rather than repeating the color information for each pixel. Therefore, you can make incredibly wide images with very small file sizes. The image in to article (box.gif) is roughly 2.5 KB at 1600 pixels wide. I downloaded it and stretched it out to 3200 pixels by copy/pasting the middle section. This enlarged the file by only about 50% to 3.7 KB. After doing a little optimizing in Fireworks (which was visually imperceptible) I got the file back down to the original file size (actually about 500 bytes smaller). The moral of the story is that this technique can safely be used for liquid layouts and you can future-proof for the massive displays of tomorrow by creating a titanic image without wasting much bandwidth.

  10. December 21, 2004 by Roger Johansson (Author comment)

    Scott: Thanks for adding that explanation here. I didn’t think of it. Just a detail: doesn’t GIF compress horisontally, not vertically? I always thought it did, but I may be wrong ;)

  11. I had always understood that it was vertical, but after doing some research it turns out that I was given bad information. Gif compression does indeed work horizontally. All readers ignore my above post. :) The message of it, that you can use absurdly wide gif images still holds true, but the reasoning is faulty. Thanks for catching me, Roger.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.