How to get content to fit snug with border-image - css

Question

fiddle
.chrome-frame {
border-width: 80px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
border-image-outset: 0;
box-sizing: border-box;
}
<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>
border-image requires me to set huge borders to render my image border correctly, but I don't want my content nudged in that far.
How can I get my content to ignore the borders so that I can use paddings to position it how I want?

Answer 1

Put the border image in the ::before pseudo element and put it behind the text. The text itself can be positioned using padding.
.chrome-frame {
position: relative;
padding: 90px 10px 10px 10px;
}
.chrome-frame::before {
display: block;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
content: "";
border-width: 84px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 84 120 1 324 fill;
border-image-outset: 0;
box-sizing: border-box;
}
<div class="chrome-frame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!</div>

Answer 2

I went with a bit of a different solution. This is a bit more flexible, and I think has better browser compat.
.chrome-frame {
background: #f7f7f7 url(http://i.stack.imgur.com/jNvtF.png) top left repeat-x;
position: relative;
padding: 85px 6px 6px 6px;
border: 1px solid #c2c2c2;
}
.chrome-tl {
background: url(http://i.stack.imgur.com/TVQ3z.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 326px;
height: 81px;
}
.chrome-tr {
background: url(http://i.stack.imgur.com/wWuRT.png) top right no-repeat;
position: absolute;
top: 0;
right: 0;
width: 123px;
height: 81px;
}
<div class="chrome-frame">
<div class="chrome-tl"></div>
<div class="chrome-tr"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis ducimus excepturi laudantium quam, quod repellat? A aperiam corporis dicta dolore doloremque explicabo inventore laboriosam molestiae pariatur, perferendis, reiciendis sed.
</div>
Resize it on JS Fiddle to see how it behaves.

Answer 3

If you want to do it in a less hacky way, you can just wrap your text in another div, and then apply negative margin to it, like this:
<div class="chrome-frame">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem earum in necessitatibus neque veritatis. Ab aspernatur delectus dignissimos eaque eius fugiat hic, ipsa modi natus, officiis reiciendis sequi totam voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit id neque nostrum perferendis, quam quas quibusdam, quisquam quos repellat repellendus, repudiandae sequi. Amet dolor eligendi excepturi ipsa molestiae placeat veniam!
</div>
</div>
.chrome-frame {
border-width: 80px 120px 1px 324px;
border-image: url(http://i.imgur.com/m7QqzJi.png) 80 120 1 324 stretch;
border-image-outset: 0;
box-sizing: border-box;
}
.chrome-frame div {
margin-left: -300px;
}
However, the most elegant way would be to just use the image as a background image instead of a border image.