Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 8 • Border Images

border image
Figure 65: Artwork for use as border images.
padding:10px 10px; 
border: 3px solid #64d1dd;
-moz-border-image:url("pics/turq_border_box.png") 30 / 30px repeat;
-webkit-border-image:url("pics/turq_border_box.png") 30 / 30px repeat;
border-image:url("pics/turq_border_box.png") 30 / 30px / 2 repeat;
Figure 66: The corners of the image are placed in the corners of the box, and the sides of the image repeat to fill the length of the sides.
border image with crop marks
Figure 68: A border graphic gets sliced into nine pieces to create the four sides and the corners (and the discarded center) that are displayed along the element's border.
orange and turquoise circle border image
Figure 69: A border graphic made up of just eight circles.
padding:10px 20px;
border: 3px solid #ffbd75;
border-width:15px;
-moz-border-image:url("pics/circle_border_orange_turq.png") 15 repeat;
-webkit-border-image:url("pics/circle_border_orange_turq.png") 15 repeat;
border-image:url("pics/circle_border_orange_turq.png") 15 repeat;
Figure 70: The sliced graphic displays each corner and repeats the sides.
border: 3px solid #ffbd75;
border-width:15px;
-moz-border-image:url("pics/circle_border_orange_turq.png") 15 round;
-webkit-border-image:url("pics/circle_border_orange_turq.png") 15 round;
border-image:url("pics/circle_border_orange_turq.png") 15 round;
Figure 72: The image repeats are stretched to fill the sides an exact number of times. Note the squished circles in the vertical borders. Note: Firefox is the only browser that can do this.
border: 
3px solid #ffbd75;
border-width:15px;
-moz-border-image:url("pics/circle_border_orange_turq.png") 15 stretch;
-webkit-border-image:url("pics/circle_border_orange_turq.png") 15 stretch;
border-image:url("pics/circle_border_orange_turq.png") 15 stretch;
Figure 74: The sliced graphic displays each corner and stretches a single repeat of the sides.
orange and turquoise border image with gray circle interior
Figure 76: A border graphic made up of nine circles. Note the gray center circle.
border: 3px solid #ffbd75;
border-width:15px;
-moz-border-image:url("pics/circle_border_orange_turq_gray.png") 15 round;
-webkit-border-image:url("pics/circle_border_orange_turq_gray.png") 
    15 round;
border-image:url("pics/circle_border_orange_turq_gray.png") 15 round;
Figure 77: Test of "fill off" default and round.