Multiple CSS borders without wrapping?

Question

Hi, I want to create a button with two solid borders around eachother, like this:

.--------.
|.------.|
||Button||
|'------'|
'--------'

Of course I can do it this way by wrapping the button into an evil, bandwidth-consuming <span>:

<span class="outer-border">
    <a class="button" href="http://www.example.com/"&gt;Button&lt;/a&gt;
</span>

.outer-border { border: solid 1px red; } .button { border: solid 1px green; }

But isn't there a cleaner way than using too much HTML? Is there a way to add two borders to just one selector? Namely, I also want to do this with an XML file which can't be modified, of course.

Could anyone help me? Thanks.

Answer 1

There's the outline property but it's not supported by IE 6 and 7 (compatibility table here).

I'd go with the span.

Answer 2

If it is not vital that the borders have different colours then you could use border-style:double

Answer 3

It is possible, using CSS 3 box shadows, which are supported in Chrome 5 and Firefox 3.5.

I'm not sure if it'll work in IE, but it will sooner or later.

Here is a useful article: http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/

And the W3C definition at http://www.w3.org/TR/css3-background/#box-shadow

Specifically, to do your one, use (on Chrome/Safari/Firefox)

.button {
    margin: 4px;
    -webkit-box-shadow: 0 0 0 1px green, 0 0 0 2px white, 0 0 0 1px green;
    -mox-box-shadow: 0 0 0 1px green, 0 0 0 2px white, 0 0 0 1px green;
}

The box shadows are not included in the boxing model, so you need to set a margin to the size of your borders.