CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

CSS border-image Property

The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

We will use the following image (called "border.png"):

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.

Example:

	border:  10px solid transparent;  
	padding:  15px;  
	border-image:  url(border.png) 30 round;  
}

CSS Border Image Properties

Different Slice Values

Different slice values completely changes the look of the border:

	border:  10px solid transparent;  
	padding:  15px;  
	border-image:  url(border.png) 50 round;  
}  
  
	border:  10px solid transparent;  
	padding:  15px;  
	border-image:  url(border.png) 20% round;  
}  
  
	border:  10px solid transparent;  
	padding:  15px;  
	border-image:  url(border.png) 30% round;  
}