Is there a way to combine border-image and inset box-shadow that works?

Question

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>

Answer 1

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;