Why does IE apply opacity to the border style: dotted line?
The title says it all, I just discovered that IE (9-11) automatically applies 50% opacity to any element border with border-style: dotted
.
The strangest thing is that this only happens in dotted
, solid
and dashed
is fine.
You can test it yourself: http://jsfiddle.net/ptv74f4q/1/
Any ideas?
source to share
This is because IE flattens the dotted border. If you do border-width
more than 1px
(say 5px
) the border turns white again.
One way to get around this would be to overlay some pseudo-elements with the same dashed border on top to counteract the opacity:
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}
<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
Alternative method
Alternatively, you can try using border-image
. There are online tools (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator ) that could help you create a similar border using this method.
source to share