How to draw circle in html page?

Sergey Metlov picture Sergey Metlov · Aug 3, 2011 · Viewed 285.8k times · Source

How do you draw a circle using HTML5 and CSS3?

Is it also possible to put text inside?

Answer

ryanoshea picture ryanoshea · Aug 3, 2011

You can't draw a circle per se. But you can make something identical to a circle.

You'd have to create a rectangle with rounded corners (via border-radius) that are one-half the width/height of the circle you want to make.

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>