CSS border-image-source Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-image-source is a CSS property that specifies the source image or content to be used as the border for an element when applying theborder-image property. This property allows web developers to create complex and decorative borders by using images, gradients, or even other HTML elements as the source material for their borders. It is commonly used to enhance the visual aesthetics of elements like divs and buttons, allowing for creative and customized border designs that can significantly improve the overall look and feel of a web page.

Initial value: none
Applies to: All elements
Inherited: No
Computed value: 'none' or the image with its URI made absolute
Animatable: No
JavaScript syntax: object.style.borderImageSource

Interactive Demo

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

border-image-source: url('images/border.svg');

border-image-source: repeating-linear-gradient(45deg, transparent, green 20px);

border-image-source: none;

Example of the border-image-outset property.

Syntax

border-image-source: none | <image>

Values

noneborder-style is used instead.
<image>This value contains a path to an image that you want to apply to the element in question as a background image

Example

HTML

<div>Example of the border-image-source property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result

Editor