Remove 1Px Transparent Space from CSS Box-Shadow in Ie11

Remove 1px transparent space from CSS box-shadow in IE11?

Now that we know it's a bug, here's one acceptable workaround:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.

Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.

Checkout the fiddle here: http://jsfiddle.net/TVNZ2/

IE11 - border-radius and box-shadow together cause problems

Updated to make it little Better.

As per your request from comment, here is a workaround for you using :after or :before of you div.

div {  display: block;  width: 500px;  height: 200px;  border: 1px solid black;  border-radius: 5px;  transition: box-shadow 1s;  position: relative;  background: #fff;}
div:after {  content: '';  display: block;  position: absolute;  width: 500px;  height: 200px;  border-radius: 5px;  background: #000;  left: 0;  top: 0;  opacity: 0;  transition: all 1s ease-in-out;  z-index: -1;}
div:hover:after {  left: 25px;  top: 25px;  opacity: 1;}

<div>Test</div>

1px gap between divs in IE11

try giving box-sizing property to your container

.container {
 box-sizing:border-box;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -o-box-sizing:border-box;
}

It might be getting box-sizing:content-box inherited from somewhere on in your css.

IE11 / Edge buggy box-shadow rendering

Is inline necessary for you? If it is not, adding display: inline-block to your first rule should fix this in IE.

#a > span {
    box-shadow: 0px 0px 1px 3px red;
    display: inline-block;
}

IE11 draws small line between positioned elements

It's because the way the border is calculated. Screen is a finite grid, so when you decide that the center of the arc is at coordinates e.g. "10 x, 10 y" it could mean different things:

• the center of the arc is in the middle of the 10th pixel?
• the center of the arc is at the begginnig of the 10th pixel?
• the center of the arc is at the end of the 10th pixel?

So, when it draws the arc with radius 10px it could go half pixel farther (or closer) from the point you expected (and will yield "half pixel" sizes, a 2px gray line where you wanted 1px black, a circle that is not really round or some other sad surprise).

This kind of different behaviour is common among the major browsers (e.g. see this: Border-radius: 50% not producing perfect circles in Chrome ) I think it shouldn't be considered a bug, those are just implementation decisions that unluckily for us differ from a browser to another.

The most common solutions is to play with the border width (0.5px,1px,2px) and radius (even/odd sizes) or even positioning with decimals (bottom: -19.5px?). Can't say wich combination will yield best results for this case since I can't reproduce it in Windows 7 + IE11.

Box-shadow in IE present a transparent line/border

Add display:block or inline-block in the span

CSS:

  .tiles-container .tile-title-container .tile-title {
     background-color: #fff;
     color: #243e7b;
     padding-top: 4.85px;
     padding-bottom: 5px;
     -webkit-box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
     -moz-box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
     box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
     box-decoration-break: clone;
     line-height: 1.55em;
     display: block;
   }

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2159/

A circle with inside and out side box-shadow have 1px extra border

I think box-shadow: inset is messing up with border-radius.

While waiting for other solutions, you can always avoid using inset and apply instead a border, removing manually the 32px (16px + 16px) from the height and width of your div.

.wrapper {
  padding: 30px;
}

.circle {
  border-radius: 50%;
  background: #32a500;
  box-shadow: 0px 0px 0px 16px #f1f1f1;
  border: 16px solid #f9f9f9;
  width: 88px;
  height: 88px;
}

<div class="wrapper">
  <div class="circle"></div>
</div>

IE11 Box-shadow spread and border-radius

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;
}

TailwindCSS: is it possible to remove a box-shadow on print?

In order to make it work I had to add the following to the config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

With this being added to config any print: statements are working now, including print:shadow-none

---

Related Topics