What is a good way to write CSS for multiple borders? Unicorn Meta Zoo #1: Why another...
With indentation set to `0em`, when using a line break, there is still an indentation of a size of a space
What is this word supposed to be?
A Paper Record is What I Hamper
Is Electric Central Heating worth it if using Solar Panels?
Mistake in years of experience in resume?
Are these square matrices always diagonalisable?
What is the least dense liquid under normal conditions?
c++ diamond problem - How to call base method only once
Would reducing the reference voltage of an ADC have any effect on accuracy?
Raising a bilingual kid. When should we introduce the majority language?
How to get even lighting when using flash for group photos near wall?
"Whatever a Russian does, they end up making the Kalashnikov gun"? Are there any similar proverbs in English?
The art of proof summarizing. Are there known rules, or is it a purely common sense matter?
What's the difference between using dependency injection with a container and using a service locator?
What is the best way to deal with NPC-NPC combat?
How can I wire a 9-position switch so that each position turns on one more LED than the one before?
All ASCII characters with a given bit count
How would this chord from "Rocket Man" be analyzed?
Did the Roman Empire have penal colonies?
Will I lose my paid in full property
Seek and ye shall find
Married in secret, can marital status in passport be changed at a later date?
Trumpet valves, lengths, and pitch
What ability score does a Hexblade's Pact Weapon use for attack and damage when wielded by another character?
What is a good way to write CSS for multiple borders?
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How can I get multiple borders with rounded corners? CSSHow to write a:hover in inline CSS?What does the “+” (plus sign) CSS selector mean?CSS Font Border?What is the best way to conditionally apply a class?How to apply multiple transforms in CSS?What does the “~” (tilde/squiggle/twiddle) CSS selector mean?css inset box shadow around all contentRemove blue border from css custom-styled button in ChromeInset box-shadow not following the curveRendering overlay to div with border radius and overflow: hidden (Chrome only)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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 16 hours ago
Peter Mortensen
14k1987114
asked 22 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 16 hours ago
Peter Mortensen
14k1987114
asked 22 hours ago
PiyushPiyush
2,03572558
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
15 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 16 hours ago
Peter Mortensen
14k1987114
asked 22 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 16 hours ago
Peter Mortensen
14k1987114
asked 22 hours ago
PiyushPiyush
2,03572558
edited 16 hours ago
Peter Mortensen
14k1987114
asked 22 hours ago
PiyushPiyush
2,03572558
edited 16 hours ago
Peter Mortensen
14k1987114
edited 16 hours ago
Peter Mortensen
14k1987114
edited 16 hours ago
Peter Mortensen
14k1987114
14k1987114
asked 22 hours ago
PiyushPiyush
2,03572558
asked 22 hours ago
PiyushPiyush
2,03572558
asked 22 hours ago
PiyushPiyush
2,03572558
2,03572558
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
15 hours ago
add a comment |
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
15 hours ago
1
1
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
15 hours ago
Possible duplicate of How can I get multiple borders with rounded corners? CSS
– Luciano
15 hours ago
add a comment |
3 Answers
3
active
oldest
votes
36
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 16 hours ago
Peter Mortensen
14k1987114
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
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 18 hours ago
Temani AfifTemani Afif
84.7k104896
add a comment |
4
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 13 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
36
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 16 hours ago
Peter Mortensen
14k1987114
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
add a comment |
36
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 16 hours ago
Peter Mortensen
14k1987114
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
add a comment |
36
36
36
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
edited 16 hours ago
Peter Mortensen
14k1987114
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
Use box-shadow with border-radius:
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>If you want without a div, check here.
img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>img {
margin: 40px;
width: 90px;
border-radius: 50%;
box-shadow:
0 0 0 10px #817dd1,
0 0 0 20px #5c58aa,
0 0 0 30px #3d3a84,
0 0 0 40px #211f56;
}
div {
background: #100f35;
width: 170px;
}<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>edited 16 hours ago
Peter Mortensen
14k1987114
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
edited 16 hours ago
Peter Mortensen
14k1987114
edited 16 hours ago
Peter Mortensen
14k1987114
edited 16 hours ago
Peter Mortensen
14k1987114
14k1987114
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
answered 22 hours ago
Udhay TitusUdhay Titus
3,32921736
3,32921736
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 18 hours ago
Temani AfifTemani Afif
84.7k104896
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 18 hours ago
Temani AfifTemani Afif
84.7k104896
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 18 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 18 hours ago
Temani AfifTemani Afif
84.7k104896
edited 14 hours ago
answered 18 hours ago
Temani AfifTemani Afif
84.7k104896
answered 18 hours ago
Temani AfifTemani Afif
84.7k104896
answered 18 hours ago
Temani AfifTemani Afif
84.7k104896
84.7k104896
add a comment |
add a comment |
4
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 13 hours ago
Salman ASalman A
187k68346444
add a comment |
4
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 13 hours ago
Salman ASalman A
187k68346444
add a comment |
4
4
4
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 13 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 13 hours ago
Salman ASalman A
187k68346444
edited 13 hours ago
answered 13 hours ago
Salman ASalman A
187k68346444
answered 13 hours ago
Salman ASalman A
187k68346444
answered 13 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
15 hours ago