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 outskirt 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 outskirt picture Property

The CSS3 border-image property enables you to determine a picture to be utilized rather than the ordinary fringe around an element.

The property has three parts:

  1. The picture to use as the border
  2. Where to cut the image
  3. Define whether the center segments ought to be rehashed or stretched

We will utilize the accompanying picture (called "borders.png"):

Border

The border-image property takes the picture and cuts it into nine areas, like a tic-tac-toe board. It at that point puts the corners at the corners, and the center areas are rehashed or extended as you specify.

Note: For border-image to work, the component likewise needs the border property set!

Here, the center segments of the picture are rehashed to make the border:

An picture as a border!

Here is the code:

Example

#borderimg {
    outskirt: 10px strong transparent;
    cushioning: 15px;
    - webkit-outskirt picture: url(borders.png) 40 round;/* Safari 3.1-5 */
    - o-outskirt picture: url(borders.png) 40 round;/* Opera 11-12.1 */
    outskirt picture: url(borders.png) 40 round;
}
Try it yourself »

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

An picture as a border!

Here is the code:

Example

#borderimg {
    fringe: 10px strong transparent;
    cushioning: 15px;
    - webkit-fringe picture: url(borders.png) 40 extend;/* Safari 3.1-5 */
    - o-fringe picture: url(borders.png) 40 extend;/* Opera 11-12.1 */
    outskirt picture: url(borders.png) 40 stretch;
}
Try it yourself »

CSS3 outskirt picture - 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 {
    outskirt: 10px strong transparent;
    cushioning: 15px;
    - webkit-outskirt picture: url(borders.png) 50 round;/* Safari 3.1-5 */
    - o-outskirt picture: url(borders.png) 50 round;/* Opera 11-12.1 */
    outskirt picture: url(borders.png) 50 round;
}

#borderimg2 {
    outskirt: 10px strong transparent;
    cushioning: 15px;
    - webkit-outskirt picture: url(borders.png) 25% round;/* Safari 3.1-5 */
    - o-outskirt picture: url(borders.png) 25% round;/* Opera 11-12.1 */
    outskirt picture: url(borders.png) 25% round;
}

#borderimg3 {
    outskirt: 10px strong transparent;
    cushioning: 15px;
    - webkit-outskirt picture: url(borders.png) 40% round;/* Safari 3.1-5 */
    - o-outskirt picture: url(borders.png) 40% round;/* Opera 11-12.1 */
    outskirt picture: url(borders.png) 40% round;
}
Try it yourself »