Custom border image template

border-image-source

Specify the location of the image to be used as the template for a custom border.

Property values

Despite its name, this property can be used to define a border image source from more than just image files.

<url> The URL of a bitmap image file
linear-gradient() Colors that gradually transition from top to bottom
radial-gradient() Colors that gradually transition from the center to the edges
conic-gradient() Colors that gradually transition around a point
repeating-linear-gradient() A pattern made up from linear gradients
repeating-radial-gradient() A pattern made up from radial gradients
repeating-conic-gradient() A pattern made up from conical gradients
none No image

Examples

/* a custom border from an image file gradient */            
border-image-source: url('https://example.com/fancy.png');

/* a custom border from a linear gradient */
border-image-source: linear-gradient(green, violet);
border-image-source
0

style > framing > border-image-sourceCustom border image template

🔗 🔎