How do I make an outline of a circle in CSS

Question

How can I create an outline of a circle using CSS, just having the stroke of a circle while the inside of the circle is empty?

I tried border but it doesnt display in chrome just firefox.
I tried:

box-shadow: 0 0 0 0.15em #000;

which looks great on chrome, but in firefox it looks uneven jagged.
Does anyone have any suggestions?
This is for circles used for check/filling in.

Possible duplicate of [How to draw circle in html page?](http://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page) — 4castle, Apr 11 '17 at 18:26
How about using a radio button ``? [Examples here](http://www.echoecho.com/htmlforms10.htm) — mnme, Apr 11 '17 at 18:27
If that dupe doesn't do it for you, here [a bunch more](https://www.google.com/search?q=site%3Astackoverflow.com+css+circle). — 4castle, Apr 11 '17 at 18:30
This CSS line is working correctly on a circle using Chrome and FireFox. See [**CodePen**](http://codepen.io/Bes7weB/pen/MmgGew) — Louys Patrice Bessette, Apr 11 '17 at 18:31
Possible duplicate of [CSS3 box-shadow rendering issue in Firefox](http://stackoverflow.com/questions/39629927/css3-box-shadow-rendering-issue-in-firefox) — Louys Patrice Bessette, Apr 11 '17 at 18:59

Cameron · Answer 1 · 2017-04-11T19:37:23.543

1

Try this:

.circle {
  border: 1px black solid;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  background-color: white;
}

It should work on chrome, especially doing it this way.

edited Apr 11 '17 at 19:37

answered Apr 11 '17 at 18:47

Cameron

1,049
12
24

That isn't the issue. OP knows how to draw a circle. – Louys Patrice Bessette Apr 11 '17 at 18:49

score 0 · Accepted Answer · answered Apr 11 '17 at 18:46

0

It looks like a FireFox issue...

A way around would be to show the shadow inside the circle, instead of outside.

box-shadow: inset 0 0 0 0.15em #000;

answered Apr 11 '17 at 18:46

Louys Patrice Bessette

33,375
6
36
64

How do I make an outline of a circle in CSS

2 Answers2