CODEWITHSUNDEEP
htmlcss
Nico O
Nico O

Reputation: 14102

IE11 Box-shadow spread and border-radius

I see a rendering issue in IE11 when it comes to multiple box-shadows on an element with rounded border. In this use case i've tried not to use borders but only box-shadows to create some sharp outlines for a button.

box-shadow: 0 0 0 1px #000000 inset, 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
background-color: blue;
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none;

This CSS should create a box with a black outline and white inline, like this:

enter image description here

So far so good. When i also add some border-radius, the result in Firefox and Chrome looks pretty much like this:

enter image description here

This was the desired effect. But IE (11) somehow renders this pretty weird:

enter image description here

The border radius seems to be off. Here is a jsFiddle Demo: http://jsfiddle.net/ebjWB/1/

Does anybody have an idea what I can do against this blurred border or will i have to use borders or shadows with actual size?

Upvotes: 2

Views: 2471

Answers (2)

agrm
agrm

Reputation: 3852

You could try mixing border with box-shadow. I can't guarantee it works in every browser, but it does fix the corners in IE11. (Please note I have reduced the padding to compensate for the border)

a {
    box-shadow: 0 0 0 1px #000;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background-color: blue;
    color: white;
    display: inline-block;
    padding: 3px 8px;
    text-decoration: none;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

Since box-shadow does not add additional dimension to the element (AFAIK) you can just remove the inset property.

JSfiddle

a
{
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 2px #000000  ;
    background-color: blue;
    color: white;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
}

Upvotes: 2

Related Questions