border-image-source

Definition

The border-image-source property in CSS specifies the image to use for the border of an element. It is used in conjunction with the border-image-slice property, which specifies how the image should be sliced into pieces to form the border, and the border-image-repeat property, which specifies how the image should be repeated or stretched to fill the border area.

Examples

Use the image 'my-border-image.png' as the border image:

border-image-source: url('my-border-image.png');

Use the image 'my-gradient.png' as the border image:

border-image-source: url('my-gradient.png');

Use the image 'my-pattern.png' as the border image:

border-image-source: url('my-pattern.png');

Values

The border-image-source property takes a single value, which should be a URL pointing to the image to use for the border.

Best Practices

• Use the border-image-source property to specify the image to use for the border of an element. The image is sliced into pieces using the border-image-slice property, and the pieces are placed along the edges of the element. The remaining area is filled with the image, as specified by the border-image-repeat property.
• Specify the URL of the image using a relative or absolute path. For example: border-image-source: url('images/my-border-image.png'); or border-image-source: url('https://example.com/images/my-border-image.png');
• Use the border-image-source property in conjunction with the border-image-slice property, which specifies how the image should be sliced into pieces to form the border, and the border-image-repeat property, which specifies how the image should be repeated or stretched to fill the border area.
• If you want to create a border with a solid color or gradient, you can use a 1x1 pixel image as the border image and use the border-image-slice property to slice it into pieces that form the border.
• If you're using a small image or pattern as the border image, you may want to use the repeat value for the border-image-repeat property to tile the image to fill the border area.
• If you're using a large image as the border image, you may want to use the stretch value for the border-image-repeat property to ensure that the image fills the entire border area.
• Keep in mind that the border-image-source property only works when used with the border-image-slice property, which specifies how the image should be sliced into pieces to form the border, and the border-image-repeat property, which specifies how the image should be repeated or stretched to fill the border area.

Browser Compatibility

Note that support for the border-image-source property is limited in Internet Explorer 10 and earlier.