CSS3 border-image Property

Here is a brief explanation of how to set borders for images using css3.

Explanation

Property :

border-image: source slice width outset repeat|initial|inherit;

Usage:


border-image: url(border.png) 30% round;
border-image: url(border.png) 30% stretch
border-image: url(border.png) 30 repeat;

Definition:

The border-image property allows you to specify an image to be used instead of the normal border around an element. The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

Example 1:


<div style='border: 10px solid transparent;width:200px;padding: 15px; -webkit-border-image: url(border.jpeg) 20 repeat; /* Safari 3.1-5 */ -o-border-image: url(border.jpeg) 20 repeat; /* Opera 11-12.1 */ border-image:url(border.jpeg) 20 repeat;'>border-image: url(border.jpeg) 20 repeat;</div>
Result:
border-image: url(border.jpeg) 20 repeat;


Example 2:


<div style='border: 10px solid transparent;width:200px;padding: 15px; -webkit-border-image: url(border.jpeg) 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(border.jpeg) 30 stretch; /* Opera 11-12.1 */ border-image: url(border.jpeg) 30 stretch;'>border-image: url(border.jpeg) 30 stretch;</div>

Result:
border-image: url(border.jpeg) 30 stretch;


Example 3:


<div style='border: 10px solid transparent;width:200px;padding: 15px; -webkit-border-image: url(border.jpeg) 30% round; /* Safari 3.1-5 */ -o-border-image: url(border.jpeg) 30% round; /* Opera 11-12.1 */ border-image: url(border.jpeg) 30% round;'>border-image: url(border.jpeg) 30% round;</div>
Result:
border-image: url(border.jpeg) 30% round;


Ask Questions

Ask Question