border image

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS3 border-image Property

Example

Specify an image as the border around an element:

#borderimg { 
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;

}

Definition and Usage

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

 

CSS Syntax

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

Property Values

Value Description  
border-image-source The path to the image to be used as a border  
border-image-slice How to slice the border image  
border-image-width The width of the border image  
border-image-outset The amount by which the border image area extends beyond the border box  
border-image-repeat Whether the border image should be repeated, rounded or stretched

More Examples

Example

Different slice values completely changes the look of the border:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;

}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;

}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;

}