Css - circle with an edge on the border

Question

I am trying to create a circle with an outline with a mark.
Everything seems to work, except that I cannot get a little px margin.
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/

Answer 1

I would say it like this:

Outer Border - Use Window 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> 

---

Alternatively, you can use the 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> 

Answer 2

Try:

 .ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin: 2px; background: #fcc; width: 30px; height: 30px; } 

Or with internal addition:

 .ui-corner-all2 { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; padding: 2px; background: #fcc; width: 30px; height: 30px; } 

See also in this script the difference when using CSS fields and properties.

http://jsfiddle.net/MQx7r/ 4 /

Answer 3

You can use outline in combination with outline-radius . Check out jsFiddle .