WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Border Images


CSS3 Border Images

With the CSS3 border-image property, you can set a picture to be utilized as the border around an element.


Browser Support

The numbers in the table determine the principal program form that completely bolsters the property.

Numbers pursued by - webkit-, - moz-, or - o-indicate the main form that worked with a prefix.

Property
border-image 16.0
4.0 - webkit-
12.0 11.0 15.0
3.5 - moz-
6.0
3.1 - webkit-
15.0
11.0 - o-

CSS3 border-image Property

The omitted values are set to their default values.

Tip: Use the border-image- * attributes to build beautiful expandable buttons!

An picture as a border!

Here is the code:

Example

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

Here, the center areas of the picture are round to make the border:

An picture as a border!

Here is the code:

Example

#borderimg { border: 11px solid transparent;    padding: 18px;    -webkit-border-image: url(borders.png) 30 round;    /* Safari 3.1-5 */ -o-border-image: url(borders.png) 30 round;    /* Opera 11-12.1 */ border-image: url(borders.png) 30 round;    }
Try it yourself »

CSS3 border-image - Different Slice Values

Different cut qualities totally changes the look of the border:

Example 1:

border-picture: url(borders.png) 50% round;

Example 2:

border-picture: url(borders.png) 25% round;

Example 3:

border-picture: url(borders.png) 40% round;

Here is the code:

Example

#borderimg1 { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(borders.png) 50 round;
/* Safari 3.1-5 */ -o-border-image: url(borders.png) 50 round;
/* Opera 11-12.1 */ border-image: url(borders.png) 50 round; } #borderimg2 { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(borders.png) 20% round;
/* Safari 3.1-5 */ -o-border-image: url(borders.png) 20% round;
/* Opera 11-12.1 */ border-image: url(borders.png) 20% round; } #borderimg3 { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(borders.png) 30% round;
/* Safari 3.1-5 */ -o-border-image: url(borders.png) 30% round;
/* Opera 11-12.1 */ border-image: url(borders.png) 30% round; }
Try it yourself »