border-image-source
Specifies the image used as the border. You can use an actual image file (URL) or even a CSS gradient, which allows for advanced effects like gradient borders.
It is documented as part of the CSS Backgrounds and Borders specification.
Syntax
/* Usage Example */
.gradient-border {
border: 5px solid;
/* Uses a linear gradient as the border instead of a flat color */
border-image-source: linear-gradient(to right, #7c3aed, #ec4899);
border-image-slice: 1;
}
/* Syntax */
border-image-source: none;
/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;border-image-source Browser support
Widely available
Since
2017 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
15+
15+
6+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more