Question

I am trying to create a circle with an outline that has margin.
Everything seems to work except i cant seem to get that few px 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/

Answer 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>