Conic Gradient Border - CSS

Create cool border design with CSS conic-gradient under border-image-source.

Conic Gradient Border

HTML 

<section>
  Conic Gradient Border
</section>

CSS

section {
  inline-size: 80vmin;
  block-size: 80vmin;

  border: 5vmin solid hsl(100 100% 60%);
  border-image-slice: 1;
  
  /*  leverage cascade for cross-browser gradients  */
  border-image-source: linear-gradient(
    hsl(100 100% 60%),
    50%,
    hsl(200 100% 60%)
  );
  border-image-source: radial-gradient(
    hsl(100 100% 60%),
    75%,
    hsl(200 100% 60%)
  );
  border-image-source: conic-gradient(
    hsl(100 100% 60%), 
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
  
  display: grid;
  place-content: center;
  padding: 4ch;
  box-sizing: border-box;
  font-size: 10vmin;
}