Use conic gradients to create a cool border
Baseline: Widely supported




Baseline: Widely supported
Baseline support is determined by this web feature being supported on the current and the previous version of major browsers.
Conic gradients can be used to create some interesting effects, such as this nice border example.
This CodePen created by Adam Argyle, originally shared via this tweet on Twitter, shows how to use a conic gradient to create a border.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun creatively forked Adam's codepen and created this CodePen. Move your mouse over the element and you'll see the gradient change, thanks to a little bit of JavaScript updating a CSS custom property that stores the rotation angle.
These examples uses the border-image-source
property. This property sets the source image used to create an element's border. As with other properties that accept an image value, any CSS gradient type is valid too.
border-image-source
#
- Chrome 15, Supported 15
- Firefox 15, Supported 15
- Edge 12, Supported 12
- Safari 6, Supported 6
Conic gradient #
- Chrome 69, Supported 69
- Firefox 83, Supported 83
- Edge 79, Supported 79
- Safari 12.1, Supported 12.1