<h2>demo1</h2>

<img class="demo1" src="https://via.placeholder.com/160x160.png" alt="placeholder">

<h2>demo2</h2>

<img class="demo2" src="https://via.placeholder.com/160x160.png" alt="placeholder">

<h2>demo3</h2>

<img class="demo3" src="https://via.placeholder.com/160x160.png" alt="placeholder">
* {
  box-sizing: border-box;
}

img {
  width: 160px;
  aspect-ratio: 1/1;
}

.demo1 {
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    red 0deg,
    orange 90deg,
    yellow 180deg,
    green 270deg,
    blue 360deg
  );
}

.demo2 {
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
  );
}

.demo3 {
  border-radius: 50%;
  padding: 10px;
  background-image: conic-gradient(
    hsl(221deg 95% 46%) 0deg,
    hsl(221deg 95% 46%) 90deg,
    hsl(293deg 70% 54%) 150deg,
    hsl(293deg 70% 54%) 180deg,
    hsl(293deg 70% 54%) 210deg,
    hsl(221deg 95% 46%) 270deg,
    hsl(221deg 95% 46%) 360deg
  );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.