Firefox outline around box-shadow on hover

Question

This is my first question on StackOverflow, so I'll try to format it the right way.

Basically, I have a div with a border and an outline. On hover, the div also gets a shadow, which, of course, should be outside of the outline. This goes well in all browsers, except for firefox. Firefox seems to render the outline outside of the box-shadow for some reason. An example can be seen here: http://rubencoolen.be/test.php

This is my CSS:

.block {

    background: #eceeeb;
    border: 3px solid white;
    outline: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;

}

.block:hover {

    background: whitesmoke;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    -moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);

}

I can't seem to find the right way of tackling this issue.

Please excuse my moderate English, it's not my main language.

Answer 1

You can just nest divs to give the same effect as an outline:

<div class='outline'>
    <div class="block">Test</div>
</div>

And then add change the css:

.block {
    position:absolute;
    top:0px;
    left:0px;
    background: #eceeeb;
    border: 3px solid white;
    width: 234px;
    padding: 10px;
    float: left;
    height: 124px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;
}

.outline {
    position:relative;
    border: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
}

This works in both latest versions of Chrome and Firefox

Answer 2

As others have stated in the comments, you're not really using outline for it's intended purposes -- it's not meant to be treated just as an additional border in case the standard one isn't good enough for you; it has it's own reason for existing, and its own semantics. I'd suggest not using it this way at all.

So you asked what you could use instead?

• border-image:

  Recent browsers all support a feature called border-image, which allows you to define the look of the border pretty much as you want to. You can specify any images you want in the borders, and thus you can design the border to look the way you have it (or even a lot more complex), without needing to resort to the outline style at all.

  The down-side is that IE doesn't support it (not even IE10), so you'll need to fall back on your outline solution for that. But you could use something like Modernizr to do feature detection for border-image, and only fall back to outline if border-image isn't supported.

  • Reference: https://developer.mozilla.org/en-US/docs/CSS/border-image
  • Examples: http://www.sitepoint.com/css3-border-image/
  • Browser support: http://caniuse.com/border-image

• :before or :after with a border.

  The :before and :after pseudo-selectors allow you to create an additional element before an after a given element using just CSS.

  You could use either of these to create an element with a border which would solve the problem for you, again without needing to use an outline or any additional markup.

Hope that helps.