What is a good way to write CSS for multiple borders? Unicorn Meta Zoo #1: Why another...
What is this word supposed to be?
Would reducing the reference voltage of an ADC have any effect on accuracy?
Passing args from the bash script to the function in the script
Why did C use the -> operator instead of reusing the . operator?
What is the best way to deal with NPC-NPC combat?
What is the least dense liquid under normal conditions?
What's the difference between using dependency injection with a container and using a service locator?
Suing a Police Officer Instead of the Police Department
How to open locks without disable device?
The art of proof summarizing. Are there known rules, or is it a purely common sense matter?
Multiple fireplaces in an apartment building?
How would this chord from "Rocket Man" be analyzed?
Trumpet valves, lengths, and pitch
What is a 'Key' in computer science?
How to count in linear time worst-case?
Is it acceptable to use working hours to read general interest books?
Why did Israel vote against lifting the American embargo on Cuba?
What if Force was not Mass times Acceleration?
"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"
Does Feeblemind produce an ongoing magical effect that can be dispelled?
Will I lose my paid in full property
How to use @AuraEnabled base class method in Lightning Component?
Did the Roman Empire have penal colonies?
Expansion//Explosion and Siren Stormtamer
What is a good way to write CSS for multiple borders?
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How can I get multiple borders with rounded corners? CSSHow to write a:hover in inline CSS?What does the “+” (plus sign) CSS selector mean?CSS Font Border?What is the best way to conditionally apply a class?How to apply multiple transforms in CSS?What does the “~” (tilde/squiggle/twiddle) CSS selector mean?css inset box shadow around all contentRemove blue border from css custom-styled button in ChromeInset box-shadow not following the curveRendering overlay to div with border radius and overflow: hidden (Chrome only)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
18
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?
css css3 border box-shadow
edited 13 hours ago
Peter Mortensen
14k1987114
asked 18 hours ago
PiyushPiyush
2,03572558
add a comment |
18
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?
css css3 border box-shadow
edited 13 hours ago
Peter Mortensen
14k1987114
asked 18 hours ago
PiyushPiyush
2,03572558
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
11 hours ago
add a comment |
18
18
18
8
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?
css css3 border box-shadow
edited 13 hours ago
Peter Mortensen
14k1987114
asked 18 hours ago
PiyushPiyush
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;
But it doesn't give the output as expected. How do I achieve this?
css css3 border box-shadow
css css3 border box-shadow
edited 13 hours ago
Peter Mortensen
14k1987114
asked 18 hours ago
PiyushPiyush
2,03572558
edited 13 hours ago
Peter Mortensen
14k1987114
asked 18 hours ago
PiyushPiyush
2,03572558
edited 13 hours ago
Peter Mortensen
14k1987114
edited 13 hours ago
Peter Mortensen
14k1987114
edited 13 hours ago
Peter Mortensen
14k1987114
14k1987114
asked 18 hours ago
PiyushPiyush
2,03572558
asked 18 hours ago
PiyushPiyush
2,03572558
asked 18 hours ago
PiyushPiyush
2,03572558
2,03572558
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
11 hours ago
add a comment |
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
11 hours ago
1
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
11 hours ago
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
11 hours ago
add a comment |
3 Answers
3
active
oldest
votes
35
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 13 hours ago
Peter Mortensen
14k1987114
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
add a comment |
8
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 15 hours ago
Temani AfifTemani Afif
84.7k104896
add a comment |
3
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 10 hours ago
Salman ASalman 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
35
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 13 hours ago
Peter Mortensen
14k1987114
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
add a comment |
35
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 13 hours ago
Peter Mortensen
14k1987114
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
add a comment |
35
35
35
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 13 hours ago
Peter Mortensen
14k1987114
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>edited 13 hours ago
Peter Mortensen
14k1987114
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
edited 13 hours ago
Peter Mortensen
14k1987114
edited 13 hours ago
Peter Mortensen
14k1987114
edited 13 hours ago
Peter Mortensen
14k1987114
14k1987114
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
answered 18 hours ago
Udhay TitusUdhay Titus
3,31921736
3,31921736
add a comment |
add a comment |
8
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 15 hours ago
Temani AfifTemani Afif
84.7k104896
add a comment |
8
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 15 hours ago
Temani AfifTemani Afif
84.7k104896
add a comment |
8
8
8
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 15 hours ago
Temani AfifTemani 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>answered 15 hours ago
Temani AfifTemani Afif
84.7k104896
edited 10 hours ago
answered 15 hours ago
Temani AfifTemani Afif
84.7k104896
answered 15 hours ago
Temani AfifTemani Afif
84.7k104896
answered 15 hours ago
Temani AfifTemani Afif
84.7k104896
84.7k104896
add a comment |
add a comment |
3
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 10 hours ago
Salman ASalman A
187k68346444
add a comment |
3
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 10 hours ago
Salman ASalman A
187k68346444
add a comment |
3
3
3
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 10 hours ago
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 10 hours ago
Salman ASalman A
187k68346444
edited 10 hours ago
answered 10 hours ago
Salman ASalman A
187k68346444
answered 10 hours ago
Salman ASalman A
187k68346444
answered 10 hours ago
Salman ASalman A
187k68346444
187k68346444
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
11 hours ago