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

Question

I am trying to build multiple borders which are getting faded around the user image. I am writing the CSS like this, but this won't help:

width: 90px; border-radius: 50%; box-shadow: inset 0 0 0 4px #eee, inset 0 0 0 8px #ddd, inset 0 0 0 12px #ccc, inset 0 0 0 16px #bbb, inset 0 0 0 20px #aaa, inset 0 0 0 20px #999, inset 0 0 0 20px #888; 

But it doesn't give the output as expected. How do I achieve this?

Answer 1

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

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)),       #ddd calc(var(--r) + 1*var(--d) + 1px), #ddd 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)),       #ddd calc(var(--r) + 1*var(--d) + 1px), #ddd 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}

Here is a Codepen to play with the code