CSS border-image 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!

Description

The border-image CSS property allows designers to create custom borders for elements by using an image as the border instead of relying solely on traditional border styles. This property defines an image to be used as the border for an element and allows for precise control over how the image is sliced and repeated to create the border. Designers can specify border widths, border slices, and border outset, enabling the creation of visually appealing and complex border designs that can enhance the aesthetics of web elements. This property is particularly useful when you want to achieve unique and decorative borders for elements on a webpage. Individual properties are: border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. Omitted values are set to their initial values.

Initial value
See individual properties
Applies to
All elements
Inherited
No
Computed value
See individual properties
Animatable
See individual properties
JavaScript syntax
object.style.borderImage

Interactive Demo

Example of the border-image property.

Syntax

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? || <border-image-repeat> 

Values

Example

<div>Example of the border-image property</div> 
div {
   border: 1em solid blue;
   border-image: url("images/border.png") 27 round stretch;
   height: 70px;
   padding: 20px;
   margin: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS border-image property.

Desktop
Edge Chrome Firefox Opera Safari
121615116
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181511614.4

Last updated by CSSPortal on: 1st January 2024