Setting Images on a Border using CSS

A black border around a image , doesn't look good all time . Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph. It looks Better than single colored border .

First, create an image that contains the frame of the image. Wrap the content with div elements and a unique id attribute value:

<div id="section">
<h2>Images on Borders</h2>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum
e pluribus unum..</p>
</div>

Then use the CSS3 border-image property to place the image along the border width of the element.

#section {
margin-right: 40px;
color: #000;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100px;
text-align: center;
border-style: solid;
border-color: #930;
border-width: 26px 39px 37px 43px;
border-image: url(frame.png) 26 39 37 43 stretch stretch;
-webkit-border-image: url(frame.png) 26 39 37 43 stretch stretch;
-moz-border-image: url(frame.png) 26 39 37 43 stretch round;
}

The border-image property is a new CSS3 property that Firefox 3.1 and later and Safari 4 and later support as of this writing. Not only does the border-image property allow you to frame content with one image that can scale, but it also provides a way to create image-rich buttons for web forms.

For example, first use HTML to create a simple button:

button {
background: none;
width: 250px;
padding: 10px 0 10px 0;
border-style: solid;
border-color: #666;
border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;
-webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;
-moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch;

color: white;
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0px 0px 5px rgba(0,0,0,.8);
}

When setting an image on a border, first set the widths of the border:

border-width: 0 17px 0 17px;

Then bring in the image through the url() function with the background-image property:

border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);

The next four values should match the values of the border-width property for the top, right, bottom, and left sides of the HTML element:

border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);
border-image: url(bkgd-button.png) 0 17 0 17;

The values of 0 for border-image instruct the browser to cover the entire top and bottom borders with the border image. The values of 17 indicate that 17 pixels of the border image on the right and left sides should be used. Set the next two values to stretch so that the background image expands across the distance of the sides to create a seamless fit:

border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);
border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;

Other values besides stretch are repeat (which tiles the image) and round (which also tiles, but makes the tiling of the image fit nicely between the edges).