CSS border-image Property


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
Computed value
See individual properties
See individual properties
JavaScript syntax

Interactive Demo

Example of the border-image property.


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



<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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024