CSS border-image Property

CSS border-image Property

The border-image property is a shorthand property in CSS that allows you to set an image as the border for an element. It combines several border-image properties into one, making it easier to manage border images with just a single line of code.

1. Syntax

selector {
  border-image: url("image.png") slice width outset repeat;
}

Shorthand Breakdown

• url("image.png"): Specifies the image to use for the border.

• slice: Defines how the image is sliced to create the border (using border-image-slice).

• width: Sets the width of the border (using border-image-width).

• outset: Controls how far the border image extends beyond the element (using border-image-outset).

• repeat: Defines how the image repeats in the border area (using border-image-repeat).

2. Example – Basic Border Image

div {
  border: 20px solid;
  border-image: url("border.png") 30;
}

✅ This applies the border.png image to the border with a slice of 30px.

3. Example – With Border Width and Outset

div {
  border: 20px solid;
  border-image: url("border.png") 40 20 10 50;
}

✅ The border.png image is sliced with the following values (top, right, bottom, left):

• Top: 40px

• Right: 20px

• Bottom: 10px

• Left: 50px

4. Example – Using border-image-repeat

div {
  border: 20px solid;
  border-image: url("border.png") 30 stretch;
}

✅ The border.png image is sliced with a 30px slice and stretched to cover the entire border area.

5. Example – Using fill to Fill the Center

div {
  border: 20px solid;
  border-image: url("border.png") 40 fill;
}

✅ The center area of the border is filled with the image, and the corners and edges are defined as per the slicing values.

6. Full Example – All Border Image Properties

Here’s an example using all the values in the border-image shorthand:

div {
  border: 20px solid;
  border-image: url("border.png") 40 20 30 50 15px 20px round;
}

This applies to the following properties:

• Slicing: Top = 40px, Right = 20px, Bottom = 30px, Left = 50px

• Border Width: 15px

• Outset: 20px

• Repeat: Round (the image is repeated and scaled to fit the border, maintaining the aspect ratio)

7. Best Practices

✔ Ensure you have a border defined for the border-image to be applied.
✔ Use border-image-slice to control how the image is divided.
✔ Use border-image-repeat for how the image fills the border area (stretch, repeat, round, or space).
✔ Use auto in border-image-outset if you want the image to extend automatically.