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!

☕ Buy a Coffee

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

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

border-image: url('images/border.png') 30 / 19px round;

border-image: url('images/border.png') 30 / 30px space;

border-image: linear-gradient(blue, red) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px) 60;

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

<border-image-source>See border-image-source CSS property for values.
<border-image-slice>See border-image-slice CSS property for values.
<border-image-width>See border-image-width CSS property for values.
<border-image-outset>See border-image-outset CSS property for values.
<border-image-repeat>See border-image-repeat CSS property for values.

Example

HTML

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

CSS

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

Result

Editor

Browser Support

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

Desktop

12	16	15	11	6

Tablets / Mobile

18	15	11	6	1	4.4

Last updated by CSSPortal on: 1st January 2024

Support Us