CSS3 double borders - the two-coloured version

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

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.)


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