0

I'm attempting to make a wood frame with inset border. I made a border-image and applied an inset and regular box-shadow to it. The regular shadow works nicely as a drop shadow. The inset shadow is offset by many pixels. What's going wrong and can it be fixed? I'm trying to get the inset shadow to sit right up against the wood frame, not several pixels away from it, into where the text prints.

.box {
  background: gray;
  color: white;
}
.box-shadow2 {
  border-style: solid;
  border-width: 23px;
  -moz-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
  -webkit-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
  -o-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
  border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 fill repeat;
  -webkit-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
}
<div class="box box-shadow2">Text</div>
Hideto
  • 309
  • 1
  • 3
  • 14
  • I am not sure if I understand the expected behaviour precisely but it's probably because how `inset` works. looking at https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow ... *Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.* – Praveen Puglia Aug 06 '15 at 06:44

1 Answers1

0

Your border-image is only 10px wide, not 23. The grey is the extra transparent space that it expects to be part of the image.

border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;
  • I'm a goob. That's what I get for using a web generator. I misunderstood how it worked and put in wrong values. Thank you! – Hideto Aug 06 '15 at 06:45