Multiple borders around a div with a transparent layer

Question

I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go

http://jsfiddle.net/e5Sxt/2/

html

<div id="content">
    <p>Generic Content</p>
    <button class="button">Search</button>
</div>        

css

#content{
    width: 500px;
    height: 500px;
    background-color: black;
    padding: 50px;
    color: white;
}

button{
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    background-color: #333;
    box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
    border: none;
    cursor: pointer;
}

The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.

I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.

Thanks!

Answer 1

I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.

Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.

Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:

http://jsfiddle.net/eD6xy/

HTML:

<div class="box one-div">(1 div, know color)</div>

<div class="two-div">
  <div class="box">(2 divs, pure transparent)</div>
</div>

CSS:

/* 
  With one div, works fine with a constant color (#abc)
  But with gradient, probably won't match up correctly
*/
.one-div {
  margin: 15px 10px;
  border: 5px solid blue;
  box-shadow: 0 0 0 5px #abc,
              0 0 0 10px red;
}

.two-div {
  margin-top: 30px;
  padding: 5px;
  border: 5px solid red;
}

.two-div > .box {
  border: 5px solid blue;
}

Answer 2

The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).

There is a CSS feature called border-image , which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.

With border-image , you could simply specify a small image with your two colours and transparent middle section. Job done.

Learn more about border image here: http://css-tricks.com/understanding-border-image/

However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.

Full browser support details can be found here: http://caniuse.com/#search=border-image

If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.

Of course, you can only use this solution if you aren't already using :before and :after for something else.

Hope that gives you some ideas.