What is a good way to write CSS for multiple borders? [duplicate]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)
Combinable filters
Why does nature favour the Laplacian?
Was there a shared-world project before "Thieves World"?
What happened to Captain America in Endgame?
Does holding a wand and speaking its command word count as V/S/M spell components?
Do I have an "anti-research" personality?
A Note on N!
Why must Chinese maps be obfuscated?
How to stop co-workers from teasing me because I know Russian?
How much cash can I safely carry into the USA and avoid civil forfeiture?
How can Zone of Truth be defeated without the caster knowing?
How would one muzzle a full grown polar bear in the 13th century?
How to write a column outside the braces in a matrix?
Why was primality test thought to be NP?
Do I have to worry about players making “bad” choices on level up?
Map of water taps to fill bottles
Apply MapThread to all but one variable
Why do games have consumables?
Why isn't the definition of absolute value applied when squaring a radical containing a variable?
How does a program know if stdout is connected to a terminal or a pipe?
How to have a sharp product image?
Can SQL Server create collisions in system generated constraint names?
Interpret a multiple linear regression when Y is log transformed
How can I practically buy stocks?
What is a good way to write CSS for multiple borders? [duplicate]
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;
20
This question already has an answer here:
How can I get multiple borders with rounded corners? CSS
8 answers
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?
html css css3 border box-shadow
edited yesterday
Udhay Titus
3,37921737
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
marked as duplicate by aloisdg, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
2 days ago
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
20
This question already has an answer here:
How can I get multiple borders with rounded corners? CSS
8 answers
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?
html css css3 border box-shadow
edited yesterday
Udhay Titus
3,37921737
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
marked as duplicate by aloisdg, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
2 days ago
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
20
20
20
9
This question already has an answer here:
How can I get multiple borders with rounded corners? CSS
8 answers
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?
html css css3 border box-shadow
edited yesterday
Udhay Titus
3,37921737
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
This question already has an answer here:
How can I get multiple borders with rounded corners? CSS
8 answers
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?
This question already has an answer here:
How can I get multiple borders with rounded corners? CSS
8 answers
html css css3 border box-shadow
html css css3 border box-shadow
edited yesterday
Udhay Titus
3,37921737
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
edited yesterday
Udhay Titus
3,37921737
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
edited yesterday
Udhay Titus
3,37921737
edited yesterday
Udhay Titus
3,37921737
edited yesterday
Udhay Titus
3,37921737
3,37921737
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
asked Apr 24 at 5:47
PiyushPiyush
2,04772558
2,04772558
marked as duplicate by aloisdg, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
2 days ago
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by aloisdg, LGSon css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
2 days ago
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
37
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.
with your color combination check this fiddle
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
add a comment |
9
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
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
add a comment |
5
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>answered Apr 24 at 14:14
Salman ASalman A
187k68346444
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
37
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.
with your color combination check this fiddle
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
add a comment |
37
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.
with your color combination check this fiddle
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
add a comment |
37
37
37
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.
with your color combination check this fiddle
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
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.
with your color combination check this fiddle
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>answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
edited 2 days ago
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,37921737
3,37921737
add a comment |
add a comment |
9
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
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
add a comment |
9
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
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
add a comment |
9
9
9
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
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
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>answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
edited Apr 24 at 13:44
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
answered Apr 24 at 9:22
Temani AfifTemani Afif
85k104897
85k104897
add a comment |
add a comment |
5
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>answered Apr 24 at 14:14
Salman ASalman A
187k68346444
add a comment |
5
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>answered Apr 24 at 14:14
Salman ASalman A
187k68346444
add a comment |
5
5
5
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>answered Apr 24 at 14:14
Salman ASalman A
187k68346444
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>.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>answered Apr 24 at 14:14
Salman ASalman A
187k68346444
edited Apr 24 at 14:26
answered Apr 24 at 14:14
Salman ASalman A
187k68346444
answered Apr 24 at 14:14
Salman ASalman A
187k68346444
answered Apr 24 at 14:14
Salman ASalman A
187k68346444
187k68346444
add a comment |
add a comment |
