CODEWITHSUNDEEP
htmlcssinternet-explorerbox-shadow
HeshanKit
HeshanKit

Reputation: 11

CSS3 - Transparent Border appears on Box Shadow for multiple line title in Internet Explorer

Transparent Border appears on title background with box shadow between box shadow and background in Internet Explorer (9,10, Edge).

Please check Image

This is the Style i have added:

background: rgb(130, 210, 250); 
box-shadow: 10px 0px 0px #82d2fa, -10px 0px 0px #82d2fa;

In some Stack Overflow Answers they have mentioned to put box-decoration-break: clone; but its does not support Internet Explorer. Is there any workaround?

Please Refer to Below Link: http://jsfiddle.net/verber/WmRT3/

Upvotes: 1

Views: 169

Answers (1)

Thiwanka Dodanwela
Thiwanka Dodanwela

Reputation: 487

Try this

.title {
  font: 20px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 45px;
  display: inline-block;
  width: 300px;
}
.title .highlight {
  display: inline;
  background: #ee4035;
  color: white;
  padding: 0.5rem;
  padding-left: 0;
  padding-right: 10px;
  white-space:pre-wrap;
}
.title.step-1 .highlight {
  box-shadow: -10px 0 0 #ee4035,-10px 0 0 #ee4035;  
}

Upvotes: 1

Related Questions