HTMLCSSJavaScript

CSS Forms

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 theborder property set!

Here, the middle sections of the image are repeated to create the border:

An image as a border!

Here is the code:

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

An image as a border!

Here is the code:

Tip: The border-image property is actually a shorthand property for theborder-image-source, border-image-slice, border-image-width,border-image-outsetand border-image-repeat properties.

CSS border-image - Different Slice Values

Different slice values completely changes the look 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:

CSS Border Image Properties

DevCrib is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using DevCrib, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 2022 by Michael Okwuosah. All Rights Reserved.