What is a good way to write CSS for multiple borders? [duplicate]

Answer 1

The inset box shadow (the one you were trying to use in your example) will not draw on top of image. You can position an element on top of the image that contains the inset box shadow, or better, a radial gradient background image:

.picture {
  display: inline-block;
  position: relative;
}

.picture img {
  vertical-align: bottom;
}

.picture::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: radial-gradient(circle closest-side,
    transparent 49%,
    #999 50%, #999 59%,
    #aaa 60%, #aaa 69%,
    #bbb 70%, #bbb 79%,
    #ccc 80%, #ccc 89%,
    #ffffd 90%, #ffffd 99%,
    #eee 100%
  );
}

<div class="picture">
  <img src="https://picsum.photos/id/237/256/256">
</div>

Answer 2

You can consider radial-gradient and multiple backgrounds.

I have used CSS variables to be able to easily control the shape (the image, the radius, the border length, etc.):

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      #eee calc(var(--r) + 0*var(--d) + 1px), #eee calc(var(--r) + 1*var(--d)),
      #ffffd calc(var(--r) + 1*var(--d) + 1px), #ffffd calc(var(--r) + 2*var(--d)),
      #ccc calc(var(--r) + 2*var(--d) + 1px), #ccc calc(var(--r) + 3*var(--d)),
      #bbb calc(var(--r) + 3*var(--d) + 1px), #bbb calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/cover content-box; /* content-box for the image to avoid edge issues */

  border-radius: 50%;
  padding: 2px; /* This padding is used with the content-box for the edge issue*/
  box-sizing: border-box;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;"></div>

You can also adjust the size of the image to cover only the transparent part:

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      #eee calc(var(--r) + 0*var(--d) + 1px), #eee calc(var(--r) + 1*var(--d)),
      #ffffd calc(var(--r) + 1*var(--d) + 1px), #ffffd calc(var(--r) + 2*var(--d)),
      #ccc calc(var(--r) + 2*var(--d) + 1px), #ccc calc(var(--r) + 3*var(--d)),
      #bbb calc(var(--r) + 3*var(--d) + 1px), #bbb calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/calc(2*var(--r) + 2px) calc(2*var(--r) + 2px) no-repeat;

  border-radius: 50%;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;"></div>

---

In case you will always have the same color that will fade, here is an idea using hsl() coloration where it will be easy to adjust the color without manually changing each one:

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  --c: 230,80%; /* The base color*/ 
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      hsl(var(--c), 20%) calc(var(--r) + 0*var(--d) + 1px), hsl(var(--c), 20%) calc(var(--r) + 1*var(--d)),
      hsl(var(--c), 40%) calc(var(--r) + 1*var(--d) + 1px), hsl(var(--c), 40%) calc(var(--r) + 2*var(--d)),
      hsl(var(--c), 60%) calc(var(--r) + 2*var(--d) + 1px), hsl(var(--c), 60%) calc(var(--r) + 3*var(--d)),
      hsl(var(--c), 80%) calc(var(--r) + 3*var(--d) + 1px), hsl(var(--c), 80%) calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/calc(2*var(--r) + 2px) calc(2*var(--r) + 2px) no-repeat;

  border-radius: 50%;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;--c: 20,50%;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;--c: 130,80%;"></div>

^{I am using +1px/+2px to avoid bad effect due to aliasing}

Answer 3

Use box-shadow with border-radius

box-shadow:
  0 0 0 10px #817dd1,
  0 0 0 20px #5c58aa,
  0 0 0 30px #3d3a84,
  0 0 0 40px #211f56;

img {
  margin: 40px;
  width: 90px;
  border-radius: 50%;
  box-shadow:
    0 0 0 10px #817dd1,
    0 0 0 20px #5c58aa,
    0 0 0 30px #3d3a84,
    0 0 0 40px #211f56;
}
div {
  background: #100f35;
  width: 170px;
}

<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>

If you want without a div,

img {
  margin:40px;
  width: 90px;
border-radius: 50%;
box-shadow:
    0 0 0 10px #817dd1,
    0 0 0 20px #5c58aa,
    0 0 0 30px #3d3a84,
    0 0 0 40px #211f56;

}

<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">

with your color combination check this fiddle