Skip to content
Learn Measure Blog Case studies About
  • Home
  • All articles

Use conic gradients to create a cool border

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.

border-image-source #

Browser support: chrome 15, Supported 15 firefox 15, Supported 15 edge 12, Supported 12 safari 6, Supported 6 Source

Conic gradient #

Browser support: chrome 69, Supported 69 firefox 83, Supported 83 edge 79, Supported 79 safari 12.1, Supported 12.1 Source
CSS
Last updated: May 27, 2022 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.