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)
BOOM! Perfect Clear for Mr. T
What matters more when it comes to book covers? Is it ‘professional quality’ or relevancy?
Prove that the limit exists or does not exist
What property of a BJT transistor makes it an amplifier?
If I readied a spell with the trigger "When I take damage", do I have to make a constitution saving throw to avoid losing Concentration?
What is the most remote airport from the center of the city it supposedly serves?
What are the advantages of luxury car brands like Acura/Lexus over their sibling non-luxury brands Honda/Toyota?
Create a launchpad button that opens the content and makes the current context a specific folder
How does this change to the opportunity attack rule impact combat?
What is the name of this hexagon/pentagon polyhedron?
How do LIGO and VIRGO know that a gravitational wave has its origin in a neutron star or a black hole?
How did Shepard's and Grissom's speeds compare with orbital velocity?
How can I get a job without pushing my family's income into a higher tax bracket?
Why didn't the check-in agent recognize my long term visa?
If your medical expenses exceed your income does the IRS pay you?
Randomness of Python's random
In Avengers 1, why does Thanos need Loki?
how + adjective + a/an + noun:
I need a disease
As matter approaches a black hole, does it speed up?
Would Hubble Space Telescope improve black hole image observed by EHT if it joined array of telesopes?
Getting a W on your transcript for grad school applications
How I can I roll a number of non-digital dice to get a random number between 1 and 150?
Building a list of products from the elements in another list
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;
19
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 Apr 26 at 0:50
Udhay Titus
3,47421737
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
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();
);
);
);
Apr 25 at 5:21
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 |
19
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 Apr 26 at 0:50
Udhay Titus
3,47421737
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
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();
);
);
);
Apr 25 at 5:21
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 |
19
19
19
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 Apr 26 at 0:50
Udhay Titus
3,47421737
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
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 Apr 26 at 0:50
Udhay Titus
3,47421737
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
edited Apr 26 at 0:50
Udhay Titus
3,47421737
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
edited Apr 26 at 0:50
Udhay Titus
3,47421737
edited Apr 26 at 0:50
Udhay Titus
3,47421737
edited Apr 26 at 0:50
Udhay Titus
3,47421737
3,47421737
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
asked Apr 24 at 5:47
PiyushPiyush
2,04272558
2,04272558
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();
);
);
);
Apr 25 at 5:21
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();
);
);
);
Apr 25 at 5:21
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
38
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,47421737
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
85.7k104998
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
188k68346444
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
38
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,47421737
add a comment |
38
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,47421737
add a comment |
38
38
38
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,47421737
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,47421737
edited Apr 25 at 5:12
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,47421737
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,47421737
answered Apr 24 at 5:59
Udhay TitusUdhay Titus
3,47421737
3,47421737
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
85.7k104998
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
85.7k104998
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
85.7k104998
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
85.7k104998
edited Apr 24 at 13:44
answered Apr 24 at 9:22
Temani AfifTemani Afif
85.7k104998
answered Apr 24 at 9:22
Temani AfifTemani Afif
85.7k104998
answered Apr 24 at 9:22
Temani AfifTemani Afif
85.7k104998
85.7k104998
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
188k68346444
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
188k68346444
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
188k68346444
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
188k68346444
edited Apr 24 at 14:26
answered Apr 24 at 14:14
Salman ASalman A
188k68346444
answered Apr 24 at 14:14
Salman ASalman A
188k68346444
answered Apr 24 at 14:14
Salman ASalman A
188k68346444
188k68346444
add a comment |
add a comment |
