Using Images As Borders

The border-image Properties are:

border-image-sourcesource of the image. none or url(<image>)
border-image-sliceoffsets to slice the image. 1-4 <length> or <%> values related to the image width and image height
border-image-widthborder width auto 1-4 <length> or <%> values
border-image-outsetarea outside of the border. 1-4 <length> or <%> values
border-image-repeathow to fill the image to the border areas.1 or 2 values from stretch, repeat, or round
border-imageThis 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.

        <style type="text/css"> 
        p { 
            -webkit-border-image: url( 30 / 50px; 
            -moz-border-image: url( 30 / 50px; 
            -o-border-image: url( 30 / 50px; 
            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).
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.

  HTML CSS Book 

Border Image:
  1. Using Images As Borders
  2. Controlling the Slice Repeat Style