CSS Border Images

CSS Border Images

By using CSS border-image A property that can set an image to be used as the border around an element.

CSS border-image property

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

The property has three parts:

  • the image used as the border
  • where the image should be sliced
  • define whether the middle part should be repeated or stretched

We will use this image ("border.png")

border-image The property accepts an image and slices it into nine parts, like a tic-tac-toe board. Then, the corners are placed at the corners, and the middle part is repeated or stretched according to your settings.

Note:In order to make border-image to take effect, the element also needs to be set border Property!

Here, the middle part of the repeated image is used to create the border:

Image as Border!

Here is the code:

Example

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

Try It Yourself

Here, the middle part of the image is stretched to create the border:

Image as Border!

Here is the code:

Example

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

Try It Yourself

Tip:border-image The property is actually a shorthand for the following properties:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - Different Slicing Values

Different slicing values will completely change the appearance of the border:

Example 1:

border-image: url(border.png) 50 round;

Example 2:

border-image: url(border.png) 20% round;

Example 3:

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

Here is the code:

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;
}

Try It Yourself

CSS Border Image Property

Property Description
border-image A shorthand property for setting all border-image-* properties.
border-image-source The path of the image used as the border.
border-image-slice Specifies how to crop the border image.
border-image-width Specifies the width of the border image.
border-image-outset Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat Specifies how the border image should be repeated, rounded, or stretched.