Use conic gradients to create a cool border

Baseline: Widely supported

Baseline support is determined by this web feature being supported on the current and the previous version of major browsers.

Learn more

Conic gradients can be used to create some interesting effects, such as this nice border example.

May 27, 2022

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.