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.
- Previous post: Microsoft.com Redesign: Pardon Our Dust
- Next post: CSS Hack Management
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Nice looking box and failry simple markup. Nice stuff...
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?
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 :)
Cool stuff!!
I am already using it on my website !
Thanks !
Sadish
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
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
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.
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.
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 ;)
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.
Sorry, comments are closed for this post.