Custom borders with advanced CSS - opaque

Note: this example currently only works properly in Safari. No other browser supports multiple background images. I created this demo to show how lean we can keep our markup once most browsers have implemented CSS3.

This is a completely flexible box that will expand to fit any content as long as the box does not become wider than the background images that contain the corners and the top and bottom borders.

This box contains one single div element that is not structural. The extra div is not strictly necessary, but very convenient since it leaves you free to fill the box with any content you like without worrying about vertical margins pushing parts of the top and bottom borders away.

For the background on this demo, read the related article: Custom borders with advanced CSS.

Lab Index | 456 Berea Street Home | Copyright © Roger Johansson