Skip to main content

CSS Border Images

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

The border-image property is a shorthand property for setting the following individual border properties:

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

As an example:

Editor

Loading...

In this example:

  • The border property is set to 20px solid transparent to create a solid border with a width of 20 pixels.
  • The border-image property is then used to specify the image to use for the border, url(border.png), and how it should be sliced and repeated.
  • The 30 value in the border-image property indicates how much of the image to use for the corners of the border.
  • In this case, 30 pixels of the image will be used for each corner.
  • The round value indicates how to repeat the image to fill the border.

You can also use other values for the border-image property, such as stretch to stretch the image to fill the border, repeat to repeat the image to fill the border, or round stretch to repeat and scale the image to fill the border.

As an example:

.box {
     border: 20px solid transparent;
     border-image: url(border.png) 30 repeat;
}

In the above example:

  • The repeat value is used to repeat the image to fill the border.
browsers support

Border images may not be supported in all browsers, and they may also affect the performance of your webpage if the image is large and needs to be loaded.

CSS border-image - Different Slice Values​

When using the border-image property in CSS, the slice value is used to divide the image into nine sections that will be used to create the border. The slice value can be a single value, four values, or nine values, depending on how you want to slice the image.

If you use different slice values for each side of the border, it can result in a non-uniform border.

As an example:

border-image-source: url(border-image.png);
border-image-slice: 30% 50% 20% 70%;
border-image-width: 20px;
border-image-repeat: round;

In this example:

  • We're using a border image named border-image.png, and setting different slice values for each side of the border.
  • The border-image-width property is set to 20px to specify the width of the border, and border-image-repeat is set to round to ensure that the image is stretched to fill the border.