css - circle with margin on border
39,263
Solution 1
I'd say to treat it like this:
Outer "border" - use a box shadow
Inner "margin" - use a white border
Inner area - use background color
All together you get:
.circle {
background-color: #F80;
border: 3px solid #FFF;
border-radius: 18px;
box-shadow: 0 0 2px #888;
height: 30px;
width: 30px;
}
<div class="circle"></div>
You can make the outer border more distinct by setting blur-radius to 0 on box-shadow.
.circle {
background-color: #F80;
border: 3px solid #FFF;
border-radius: 18px;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 0 0 2px #888;
height: 30px;
width: 30px;
}
<div class="circle"></div>
As an alternative, you could use a second element:
.circle {
border: 1px solid #CCC;
border-radius: 19px;
display: inline-block;
}
.inner {
background-color: #F80;
border-radius: 15px;
margin: 3px;
height: 30px;
width: 30px;
}
<div class="circle">
<div class="inner"></div>
</div>
Solution 2
As others have said, only firefox supports this. Here is a work around that does the same thing, and even works with dashed outlines.
.has-outline {
background: #51ab9f;
border-radius: 50%;
padding: 5px;
position: relative;
width:200px;
height:200px;
}
.has-outline:after {
border-radius: 50%;
padding: 5px;
border: 2px dashed #9dd5cf;
position: absolute;
content: '';
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
}
<div class="has-outline">
</div>
Comments
-
t q almost 2 years
I am trying to create a circle with an outline that has margin.
Everything seems to work except i cant seem to get that fewpx
of margin in there.
Any suggestions please?.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin:5px; width:30px; height:30px;}
heres my fiddle: http://jsfiddle.net/nalagg/K6pdr/
-
zzzzBov over 11 yearsOnly firefox supports outline radius.
-
adamj over 8 yearsThe outer border is quite faint. Is there a way to make it a bit more visible? edit: needed an extra zero in there
box-shadow: 0 0 0 3px #fff;
-
aruno almost 6 years@adamj added this to the answer
-
aruno almost 6 yearsFor high-dpi screens you can use .5 to represent a device pixel if the 1px is too thin and 2px is too thick. eg.
0px 0px 0px 1.5px red
- I'm not sure if 'standard' resolution screens will round this up or down. -
Patrissol Kenfack over 3 yearsThis box-shadow saved me. Thanks !