CSS border-image

The CSS border-image property allows you to specify an image to be used as a border around an element. This can be a more visually appealing alternative to the standard solid borders. The image is sliced into nine parts, with the corners remaining fixed while the edges repeat or stretch as needed.

The syntax for the border-image property is:


element {
  border-image: url(border-image.png) 27 / 27px / 27px / 27px / round round;
}

This specifies that the image border-image.png should be used as the border image, with a width of 27 pixels for each of the four slices (top, right, bottom, left) and a rounding method of round for both the top and bottom edges.

Result:

In the example above, we have applied the border-image property to a div element, using a border image called border-image.png. The border has a width of 27 pixels for each slice and the edges are rounded using the round value.

You can also specify the border image as a slices of the image by using the fill keyword for the remaining slices, like this:


element {
  border-image: url(border-image.png) 27 27 27 27 fill round round;
}

Result:

The example above shows the same border-image property applied to a div element, but this time with the middle slices filled using the fill keyword.

Experiment with different images and values for the border-image property to create unique border designs for your elements!