Custom borders with advanced CSS - transparent

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 two div elements that are not structural. One is necessary because of the alpha channel transparency used for the shadows. The other div element 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 more background on this demo, read the related article: Custom borders with advanced CSS.

Lab Index | 456 Berea Street Home | Copyright © 2003-2014 Roger Johansson