CODEWITHSUNDEEP
htmlcss
choz
choz

Reputation: 17888

CSS box-radius ruins box-shadow inset effect on firefox

I have a div tag that I want to style with rounded top corners. And, I am facing an issue with my box-radius.

.box {
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
  box-shadow: inset 0 20px 3px 1px #4D7594;
  border-radius: 15px;
}
<div class="box">
</div>

Well, so far works good. But in this sample, if I add more px to my border-radius, it will break the inset of box-shadow.

.box {
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
  box-shadow: inset 0 20px 3px 1px #4D7594;
  border-radius: 16px;
}
<div class="box">
</div>

You may notice that on the top area of the .box seems to have its shadow missing. This behavior only happens on firefox. And currently, I am using firefox 45.0.1.

Upvotes: 0

Views: 1284

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

Setting two shadows seems to fix it at this time :

.box {
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
  box-shadow: inset 0 18px  #4D7594, inset 0 20px 3px 1px #4D7594;
  border-radius: 16px;
}
<div class="box">
</div>

Upvotes: 2

Related Questions