Firefox outline rendering wrong

Question

On a site I am building I am using a border - outline - box shadow for the body.

See here jsFiddle

border: 9px solid #0C144E;
outline: 9px solid #fff;
box-shadow: 0 0 0px 18px #CC092F;

My problem is that Firefox renders the outline differently.

I can get around it by applying:

outline-offset: -18px;

Although it fixes firefox, this means that it doesn't display correctly in Chrome, Safari, is there a way to apply it to firefox only I tried adding -moz- to no avail. Or another way around it.

Answer 1

You can use the technique showed here: CSS Hacks Targeting Firefox

@-moz-document url-prefix() { 
  body {
    outline-offset: -18px;
  }
}

jsFiddle Demo