CSS Border Images (original) (raw)

Last Updated : 2 Aug, 2023

The **border-image property in CSS is used to specify the border of an image. This property creates a border using an image instead of a normal border.

The property contains three-part that are listed below:

• The complete image is used as a border.
• A slice of the image is used as a border
• The middle section of the image is used (repeated or stretched) as a border

The border-image property is used to slice an image into nine sections, like a tic-tac-toe board.

**Syntax:

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

**border-image properties: There are many border-image properties which are listed below:

• **border-image-source: This property is used to set the image path.
• **border-image-width: This property is used to set the width of the border image.
• **border-image-slice: This property is used to slice the border of the image.
• **border-image-repeat: This property is used to set the border of the image as rounded, repeated, and stretched.
• **border-image-outset: This property is used to specify the amount by which the border image area extends beyond the border box.

**Example: This example shows the use of the border-image property.

HTML `