Multiple Borders with CSS 2.1

By Nicolas Gallagher

Multiple Borders demo for Multiple Backgrounds and Borders with CSS 2.1. You'll have to view the CSS file because Firebug won't show pseudo-elements.

Fit for purpose: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, Internet Explorer 8+.

A div containing some content
A div containing some content
A div containing some content
A div containing some content

A div with at least one child element provides 7 "borders".

Popular two-colour border without images
Up to 7 single-side "borders" from one element. Actually, 8 if you are prepared to show some of the element's background colour as a fake border.

FABW's complex borders

No images used to create these borders

Vivamus auctor, tellus vel dictum pulvinar, a congue elit odio vel enim. Quisque fringilla semper fermentum. Nulla a felis a diam dapibus accumsan.

9th Jun 2010
12

Vivamus auctor, tellus vel dictum pulvinar, a congue elit odio vel enim. Quisque fringilla semper fermentum.

Read the article: Multiple Backgrounds and Borders with CSS 2.1.

You can find me on twitter.