Using Images As Borders

The border-image Properties are:

Property	Description	Values
border-image-source	source of the image.	none or url(<image>)
border-image-slice	offsets to slice the image.	1-4 <length> or <%> values related to the image width and image height
border-image-width	border width	auto 1-4 <length> or <%> values
border-image-outset	area outside of the border.	1-4 <length> or <%> values
border-image-repeat	how to fill the image to the border areas.	1 or 2 values from stretch, repeat, or round
border-image	This shorthand property sets all values.	Same as for individual properties

Slicing an Image

You specify values that are offsets into the image. The browser uses it to slice the image into nine parts.

To slice the image, you provide insets from the top, right, bottom, and left edges of the image. The insets are expressed as lengths or percentages of the image size.

You can provide different values for all four insets. Or you can give two values, which are used for the horizontal and vertical insets. Or you can have a single value, which is used for all four insets.

Slicing the image generates eight tiles. Four of them are used to draw the corners. And the other four are used to draw the border edges.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            -webkit-border-image: url(http://java2s.com/Book/HTML-CSSImages/star.png) 30 / 50px; 
            -moz-border-image: url(http://java2s.com/Book/HTML-CSSImages/star.png) 30 / 50px; 
            -o-border-image: url(http://java2s.com/Book/HTML-CSSImages/star.png) 30 / 50px; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>

Click to view the demo

The url function specifies the image source. A single slice value of 30 is used. When specifying the slice, you don't provide the units, as they are assumed to be pixels.

The / character is used to separate the slice values from the border width values.

Home
HTML CSS Book
CSS

Border Image: