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

​

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.

​

Note: For border-image to work, the element also needs the border property set.

​

EXAMPLE:

​

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

​

Here, the middle sections of the image are stretched to create the border.

​

EXAMPLE:

​

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

​

​

CSS border-image - Different Slice Values

​

Different slice values completely changes the look of the border.

 

EXAMPLE:

​

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

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

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

</script>

​