March 16, 2012
Image border on DIV
Question by Deryn
Is it possible to use an image of width 480px and height 360px and apply it to a div as a border? I know its possible to implement the below css code as a border, but I can not seem to work out how to use an image instead.
border:1px solid blue;
Answer by Starx
Actually, you can do this using a trick. Check out my demo using Google as border-image
Basically, the idea is having two divs.
<div id="borderDiv"><!-- This will serve as the border -->
<div id="inner">
</div>
</div>
CSS
#borderDiv {
padding: 2px; /* This is the width of the border :P */
background: url("borderimage.png");
}
#inner {
background: #fff;
}
