CSS3 double borders - the two-coloured version

One element, two borders in different colours - (nearly) pure CSS3.

For a long-long while nasty hacks existed to achieve double bordered, rounded corner elements, including pixel sized layouts with background images, hardcore JavaScript playing with dynamic image-replacements, and so on. CSS3 does so much for the poor designers it cannot be said in word, so I’m going to show it.

You’d like to have the same double border that is surrounding this very text? (Yes, you have to use a browser, not IE. That’s still a crap.)

CSS

background-color:#444;
border:1px solid #666;
-moz-box-shadow: 0 0 2px #111;
-webkit-box-shadow: 0 0 2px #111;
box-shadow: 0 0 2px #111;

Demo

this box has double border!


Encourage creation!

If this entry helped you, or you simply liked it, leave a tip.