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);