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

With indentation set to `0em`, when using a line break, there is still an indentation of a size of a space

What is this word supposed to be?

A Paper Record is What I Hamper

Is Electric Central Heating worth it if using Solar Panels?

Mistake in years of experience in resume?

Are these square matrices always diagonalisable?

What is the least dense liquid under normal conditions?

c++ diamond problem - How to call base method only once

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

Raising a bilingual kid. When should we introduce the majority language?

How to get even lighting when using flash for group photos near wall?

"Whatever a Russian does, they end up making the Kalashnikov gun"? Are there any similar proverbs in English?

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

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

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

How can I wire a 9-position switch so that each position turns on one more LED than the one before?

All ASCII characters with a given bit count

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

Did the Roman Empire have penal colonies?

Will I lose my paid in full property

Seek and ye shall find

Married in secret, can marital status in passport be changed at a later date?

Trumpet valves, lengths, and pitch

What ability score does a Hexblade's Pact Weapon use for attack and damage when wielded by another character?

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 16 hours ago

Peter Mortensen

14k1987114

asked 22 hours ago

Piyush

2,03572558

1

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

– Luciano
15 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 16 hours ago

Peter Mortensen

14k1987114

asked 22 hours ago

Piyush

2,03572558

1

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

– Luciano
15 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 16 hours ago

Peter Mortensen

14k1987114

asked 22 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 16 hours ago

Peter Mortensen

14k1987114

asked 22 hours ago

Piyush

2,03572558

edited 16 hours ago

Peter Mortensen

14k1987114

asked 22 hours ago

Piyush

2,03572558

edited 16 hours ago

Peter Mortensen

14k1987114

edited 16 hours ago

Peter Mortensen

14k1987114

edited 16 hours ago

Peter Mortensen

14k1987114

asked 22 hours ago

Piyush

2,03572558

asked 22 hours ago

Piyush

2,03572558

asked 22 hours ago

Piyush

2,03572558

1

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

– Luciano
15 hours ago

add a comment |

1

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

– Luciano
15 hours ago

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

– Luciano
15 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 16 hours ago

Peter Mortensen

14k1987114

answered 22 hours ago

Udhay Titus

3,32921736

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 14 hours ago

answered 18 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 13 hours ago

answered 13 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 16 hours ago

Peter Mortensen

14k1987114

answered 22 hours ago

Udhay Titus

3,32921736

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 16 hours ago

Peter Mortensen

14k1987114

answered 22 hours ago

Udhay Titus

3,32921736

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 16 hours ago

Peter Mortensen

14k1987114

answered 22 hours ago

Udhay Titus

3,32921736

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 16 hours ago

Peter Mortensen

14k1987114

answered 22 hours ago

Udhay Titus

3,32921736

edited 16 hours ago

Peter Mortensen

14k1987114

edited 16 hours ago

Peter Mortensen

14k1987114

edited 16 hours ago

Peter Mortensen

14k1987114

answered 22 hours ago

Udhay Titus

3,32921736

answered 22 hours ago

Udhay Titus

3,32921736

answered 22 hours ago

Udhay Titus

3,32921736

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 14 hours ago

answered 18 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 14 hours ago

answered 18 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 14 hours ago

answered 18 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 14 hours ago

answered 18 hours ago

Temani Afif

84.7k104896

edited 14 hours ago

answered 18 hours ago

Temani Afif

84.7k104896

answered 18 hours ago

Temani Afif

84.7k104896

answered 18 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 13 hours ago

answered 13 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 13 hours ago

answered 13 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 13 hours ago

answered 13 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 13 hours ago

answered 13 hours ago

Salman A

187k68346444

edited 13 hours ago

answered 13 hours ago

Salman A

187k68346444

answered 13 hours ago

Salman A

187k68346444

answered 13 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