What is a good way to write CSS for multiple borders? Unicorn Meta Zoo #1: Why another...

What is this word supposed to be?

Would reducing the reference voltage of an ADC have any effect on accuracy?

Passing args from the bash script to the function in the script

Why did C use the -> operator instead of reusing the . operator?

What is the best way to deal with NPC-NPC combat?

What is the least dense liquid under normal conditions?

What's the difference between using dependency injection with a container and using a service locator?

Suing a Police Officer Instead of the Police Department

How to open locks without disable device?

The art of proof summarizing. Are there known rules, or is it a purely common sense matter?

Multiple fireplaces in an apartment building?

How would this chord from "Rocket Man" be analyzed?

Trumpet valves, lengths, and pitch

What is a 'Key' in computer science?

How to count in linear time worst-case?

Is it acceptable to use working hours to read general interest books?

Why did Israel vote against lifting the American embargo on Cuba?

What if Force was not Mass times Acceleration?

"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"

Does Feeblemind produce an ongoing magical effect that can be dispelled?

Will I lose my paid in full property

How to use @AuraEnabled base class method in Lightning Component?

Did the Roman Empire have penal colonies?

Expansion//Explosion and Siren Stormtamer

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

Unicorn Meta Zoo #1: Why another podcast?

Announcing the arrival of Valued Associate #679: Cesar Manara

Data science time! April 2019 and salary with experience

The Ask Question Wizard is Live!How can I get multiple borders with rounded corners? CSSHow to write a:hover in inline CSS?What does the “+” (plus sign) CSS selector mean?CSS Font Border?What is the best way to conditionally apply a class?How to apply multiple transforms in CSS?What does the “~” (tilde/squiggle/twiddle) CSS selector mean?css inset box shadow around all contentRemove blue border from css custom-styled button in ChromeInset box-shadow not following the curveRendering overlay to div with border radius and overflow: hidden (Chrome only)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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;

Enter image description here

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

edited 13 hours ago

Peter Mortensen

14k1987114

asked 18 hours ago

Piyush

2,03572558

1

Possible duplicate of How can I get multiple borders with rounded corners? CSS

– Luciano
11 hours ago

add a comment |

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;

Enter image description here

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

edited 13 hours ago

Peter Mortensen

14k1987114

asked 18 hours ago

Piyush

2,03572558

1

Possible duplicate of How can I get multiple borders with rounded corners? CSS

– Luciano
11 hours ago

add a comment |

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;

Enter image description here

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

edited 13 hours ago

Peter Mortensen

14k1987114

asked 18 hours ago

Piyush

2,03572558

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;

Enter image description here

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

css css3 border box-shadow

edited 13 hours ago

Peter Mortensen

14k1987114

asked 18 hours ago

Piyush

2,03572558

edited 13 hours ago

Peter Mortensen

14k1987114

asked 18 hours ago

Piyush

2,03572558

edited 13 hours ago

Peter Mortensen

14k1987114

edited 13 hours ago

Peter Mortensen

14k1987114

edited 13 hours ago

Peter Mortensen

14k1987114

asked 18 hours ago

Piyush

2,03572558

asked 18 hours ago

Piyush

2,03572558

asked 18 hours ago

Piyush

2,03572558

1

Possible duplicate of How can I get multiple borders with rounded corners? CSS

– Luciano
11 hours ago

add a comment |

1

Possible duplicate of How can I get multiple borders with rounded corners? CSS

– Luciano
11 hours ago

Possible duplicate of How can I get multiple borders with rounded corners? CSS

– Luciano
11 hours ago

add a comment |

3 Answers
3

active

oldest

votes

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, check here.

edited 13 hours ago

Peter Mortensen

14k1987114

answered 18 hours ago

Udhay Titus

3,31921736

add a comment |

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}

edited 10 hours ago

answered 15 hours ago

Temani Afif

84.7k104896

add a comment |

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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

edited 10 hours ago

answered 10 hours ago

Salman A

187k68346444

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55823149%2fwhat-is-a-good-way-to-write-css-for-multiple-borders%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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, check here.

edited 13 hours ago

Peter Mortensen

14k1987114

answered 18 hours ago

Udhay Titus

3,31921736

add a comment |

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, check here.

edited 13 hours ago

Peter Mortensen

14k1987114

answered 18 hours ago

Udhay Titus

3,31921736

add a comment |

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, check here.

edited 13 hours ago

Peter Mortensen

14k1987114

answered 18 hours ago

Udhay Titus

3,31921736

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, check here.

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>

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>

edited 13 hours ago

Peter Mortensen

14k1987114

answered 18 hours ago

Udhay Titus

3,31921736

edited 13 hours ago

Peter Mortensen

14k1987114

edited 13 hours ago

Peter Mortensen

14k1987114

edited 13 hours ago

Peter Mortensen

14k1987114

answered 18 hours ago

Udhay Titus

3,31921736

answered 18 hours ago

Udhay Titus

3,31921736

answered 18 hours ago

Udhay Titus

3,31921736

add a comment |

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}

edited 10 hours ago

answered 15 hours ago

Temani Afif

84.7k104896

add a comment |

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}

edited 10 hours ago

answered 15 hours ago

Temani Afif

84.7k104896

add a comment |

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}

edited 10 hours ago

answered 15 hours ago

Temani Afif

84.7k104896

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}

.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>

.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>

.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>

.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>

.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>

.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>

edited 10 hours ago

answered 15 hours ago

Temani Afif

84.7k104896

edited 10 hours ago

answered 15 hours ago

Temani Afif

84.7k104896

answered 15 hours ago

Temani Afif

84.7k104896

answered 15 hours ago

Temani Afif

84.7k104896

add a comment |

.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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

edited 10 hours ago

answered 10 hours ago

Salman A

187k68346444

add a comment |

.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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

edited 10 hours ago

answered 10 hours ago

Salman A

187k68346444

add a comment |

.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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

edited 10 hours ago

answered 10 hours ago

Salman A

187k68346444

.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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

.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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

.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%,

    #ddd 90%, #ddd 99%,

    #eee 100%

  );

}

<div class="picture">

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

</div>

edited 10 hours ago

answered 10 hours ago

Salman A

187k68346444

edited 10 hours ago

answered 10 hours ago

Salman A

187k68346444

answered 10 hours ago

Salman A

187k68346444

answered 10 hours ago

Salman A

187k68346444

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tjyylli