How to draw circle in html page?

Question

How do you draw a circle using HTML5 and CSS3?

Is it also possible to put text inside?

Just a circle: http://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image/4844059#4844059. Circle with text: http://stackoverflow.com/questions/4861224/how-to-css-a-number-to-be-surrounded-by-a-circle/4861306#4861306. — thirtydot, Aug 03 '11 at 15:28

score 216 · Accepted Answer · edited Jan 26 '16 at 13:01

216

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>

edited Jan 26 '16 at 13:01

Lee Taylor

7,761
16
33
49

answered Aug 03 '11 at 05:00

ryanoshea

2,479
1
16
15

7

On second thought, you may want to stick a inside that
to make sure it gets displayed. Otherwise, the browser might ignore it.
– ryanoshea Aug 03 '11 at 05:06
14

I think this answer is wrong as it says you can't draw a circle in HTML5. Canvas is a HTML5 element though and you CAN draw a circle in HTML5 (http://www.w3schools.com/html/html5_canvas.asp) – jkj Jun 02 '13 at 22:23
1

So basically to turn a div into circle you have to set both of **width** and **height** some **size**, and the border radius the **half** of width. – SIFE Jun 08 '13 at 00:07
24

use -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; this way you need only to cusomize width and height to apply your changes in future – Arkady Oct 01 '13 at 12:30
3

you have to add border to make it visible. – hakan Jun 16 '14 at 08:59
5

I found using `border-radius: 50%;` worked well, change the size as desired. For colour you can use `background-color` or `border`. – Grimeh Jan 07 '15 at 00:41
1

i used **background-color** to make it visible – mokarakaya May 18 '15 at 11:36
lets assume we want to show a tooltip on hover over the circle, now is it possible that we detect hover on the circle region only and not the box area around the circle? – sarfarazsajjad Sep 26 '19 at 15:43

score 86 · Answer 2 · edited Apr 20 '16 at 15:59

It is quite possible in HTML 5. Your options are: Embedded SVG and <canvas> tag.

To draw circle in embedded SVG:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

Circle in <canvas>:

var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()

<canvas id="circlecanvas" width="100" height="100"></canvas>

Alex - GlassEditor.com · Answer 3 · 2016-10-10T15:23:54.103

There are a few unicode circles you could use:

* { font-size: 50px; }

&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

More shapes here.

You can overlay text on the circles if you want to:

#container {
    position: relative;
}
#circle {
  font-size: 50px;
  color: #58f;
}
#text {
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;
}

<div id="container">
    <div id="circle">&#x25CF;</div>
    <div id="text">a</div>
</div>

You could also use a custom font (like this one) if you want to have a higher chance of it looking the same on different systems since not all computers/browsers have the same fonts installed.

score 22 · Answer 4 · edited Oct 21 '20 at 18:35

22

border-radius:50% if you want the circle to adjust to whatever dimensions the container gets (e.g. if the text is variable length)

~~Don't forget the -moz- and -webkit- prefixes!~~ (prefixing no longer needed)

div{
  border-radius: 50%;
  display: inline-block;
  background: lightgreen;
}

.a{
  padding: 50px;
}

.b{
  width: 100px;
  height: 100px;
}

<div class='a'></div>
<div class='b'></div>

edited Oct 21 '20 at 18:35

vsync

118,978
58
307
400

answered Aug 03 '11 at 20:45

Lea Verou

23,618
9
46
48

2

You have to make sure both width and height are equal, otherwise it will create an oval. – Hp93 Jun 07 '16 at 07:45

MattAllegro · Answer 5 · 2020-05-23T23:26:01.960

As of 2015, you can make it and center the text with as few as 15 lines of CSS (Fiddle):

body {
  background-color: #fff;
}
#circle {
  position: relative;
  background-color: #09f;
  margin: 20px auto;
  width: 400px;
  height: 400px;
  border-radius: 200px;
}
#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>circle with text</title>

</head>

<body>
  <div id="circle">
    <div id="text">Text in the circle</div>
  </div>
</body>

</html>

Without any -webkit-s, this works on IE11, Firefox, Chrome and Opera, and it is valid HTML5 (experimental) and CSS3.

Same on MS Edge (2020).

That guy · Answer 6 · 2020-05-09T15:16:03.323

border-radius: 50%; will turn all elements into a circle, regardless of size. At least, as long as the height and width of the target are the same, otherwise it will turn into an oval.

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}

<div id="target"></div>

Note: browser prefixes are not needed anymore for border-radius

Alternatively, you can use clip-path: circle(); to turn an element into a circle as well. Even if the element has a greater width than height (or the other way around), it will still become a circle, and not an oval.

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}

<div id="target"></div>

Note: clip-path is not (yet) supported by all browsers

You can place text inside of the circle, simply by writing the text inside of the tags of the target,
like so:

<div>text</div>

If you want to center text in the circle, you can do the following:

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;

    display: flex;
    align-items: center;
}

#text{
    width: 100%;
    text-align: center;
}

<div id="target">
    <div id="text">text</div>
</div>

Thanks for mentioning clip-path! – umbe1987 Feb 07 '19 at 16:12 — umbe1987, Feb 07 '19 at 16:12

score 5 · Answer 7 · edited Jul 16 '15 at 23:37

5

There is not technically a way to draw a circle with HTML (there isn’t a <circle> HTML tag), but a circle can be drawn.

The best way to draw one is to add border-radius: 50% to a tag such as div. Here’s an example:

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>

edited Jul 16 '15 at 23:37

Community

1
1

answered Oct 12 '13 at 22:18

lachlanjc

148
1
5

score 5 · Answer 8 · answered Apr 27 '17 at 03:50

5

.circle{
    height: 65px;
    width: 65px;
    border-radius: 50%;
    border:1px solid red;
    line-height: 65px;
    text-align: center;
}

<div class="circle"><span>text</span></div>

answered Apr 27 '17 at 03:50

Sunny

577
6
20

dabeng · Answer 9 · 2020-12-04T02:13:04.860

The followings are my 9 solutions. Feel free to insert text into the divs or svg elements.

border-radius
clip-path
html entity
pseudo element
radial-gradient
svg circle & path
canvas arc()
img tag
pre tag

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#B90136';
ctx.fill();

#circle1 {
  background-color: #B90136;
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

#circle2 {
  background-color: #B90136;
  width: 100px;
  height: 100px;
  clip-path: circle();
}

#circle3 {
  color: #B90136;
  font-size: 100px;
  line-height: 100px;
}

#circle4::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #B90136;
}

#circle5 {
  background-image: radial-gradient(#B90136 70%, transparent 30%);
  height: 100px;
  width: 100px;
}

<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 html entity</h3>
<div id="circle3">&#11044;</div>
<hr/>
<h3>4 pseudo element</h3>
<div id="circle4"></div>
<hr/>
<h3>5 radial-gradient</h3>
<div id="circle5"></div>
<hr/>
<h3>6 svg circle & path</h3>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="#B90136" />
</svg>
<hr/>
<h3>7 canvas arc()</h3>
<canvas id="myCanvas" width="100" height="100"></canvas>
<hr/>
<h3>8 img tag</h3>
&nbsp; &nbsp; &lt;img src="circle.png" width="100" height="100" /&gt;
<hr/>
<h3>9 pre tag</h3>
<pre style="line-height:8px;">
     +++
    +++++
   +++++++
  +++++++++
 +++++++++++
 +++++++++++
 +++++++++++
  +++++++++
   +++++++
    +++++
     +++
</pre>

score 4 · Answer 10 · answered Aug 03 '11 at 04:59

You can use the border-radius attribute to give it a border-radius equivalent to the element's border-radius. For example:

<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;">&nbsp;</div>

(The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit.)

There are more examples on this page. As far as inserting text, you can do it but you have to be mindful of the positioning, as most browsers' box padding model still uses the outer square.

score 3 · Answer 11 · edited Apr 24 '19 at 19:05

3

h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}

<h1> <br>hello world</h1>

edited Apr 24 '19 at 19:05

MattAllegro

6,455
5
45
52

answered Aug 31 '16 at 14:01

Mukhtar

31
1

Artur INTECH · Answer 12 · 2023-08-23T09:17:26.313

3

No width and height requirement (specify whatever you prefer)
No SVG, canvas or Unicode

.circle {
    background: green;
    border-radius: 50%;
    width: 1rem;
    aspect-ratio: 1/1;
}

<div class="circle"></div>

Browser support:

Chrome/Edge 88+
Firefox 89+

edited Aug 23 '23 at 09:17

answered Feb 10 '21 at 04:55

Artur INTECH

6,024
2
37
34

score 3 · Answer 13 · edited Jul 29 '15 at 18:59

3

You can use border-radius property, or make a div with fixed height and width and a background with png circle.

edited Jul 29 '15 at 18:59

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Aug 03 '11 at 05:16

Bardt

695
1
8
17

score 2 · Answer 14 · edited Dec 19 '17 at 07:21

2

Simply do the following in the script tags:

<!Doctype html>
<html>
<head>
 <title>Circle Canvas</title>
</head>
<body>
 <canvas id="myCanvas" width="300" height="150" style="border:1px solid 
#d3d3d3;">
 <body>
  <script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(100, 75, 50, 0, 2 * Math.PI);
   ctx.stroke();
  </script>
    </body>
</body>
</html>

And there you go you got your circle.

edited Dec 19 '17 at 07:21

Claus Wilke

16,992
7
53
104

answered Dec 19 '17 at 05:56

Dan

1,077
7
6

Which language is this supposed to be? The OP asked about HTML5 and CSS3. – Claus Wilke Dec 19 '17 at 06:15
This can be done in html using the script tags i think i mentioned in the first line @ClausWilke – Dan Dec 19 '17 at 06:39
Please provide a complete example then that shows how you use this inside an HTML document. See [this answer](https://stackoverflow.com/a/43648337/4975218) for an example of what a complete example looks like. – Claus Wilke Dec 19 '17 at 06:44
I think that should help what you were not able to understand if you want i can add a pic of the result how the circle looks like. . . – Dan Dec 19 '17 at 06:53
Not necessay. I put it into a code snippet. It runs when you click the button. – Claus Wilke Dec 19 '17 at 07:26

score 2 · Answer 15 · answered Dec 21 '20 at 00:16

2

Here's a circle that I used for a CS 1.6 stats website. A beautiful four colors circle.

#circle {
      border-top: 8px ridge #d11967;
      border-right: 8px ridge #d32997;
      border-bottom: 8px ridge #5246eb;
      border-left: 8px ridge #fc2938;
      border-radius: 50%; width: 440px; height: 440px;
}

<div id="circle"></div>

Adjust the circle diameter by chaging the width and height.

You can also rotate and skew by using skewY(), skewX() and rotate():

  transform: rotate(60deg);
  transform: skewY(-5deg);
  transform: skewX(-15deg);

answered Dec 21 '20 at 00:16

GTodorov

1,993
21
24

The blue and pink sections have their shadow on the wrong side, but other than that great 3D effect. – Hashim Aziz Nov 29 '21 at 23:01
You can change as needed! – GTodorov Dec 01 '21 at 17:14
@HashimAziz this is just an example. You can add a shadow on whichever side you need. In a circle, there's no wrong side. It depends where you need your object light to be. – GTodorov Jun 26 '23 at 16:10

score 1 · Answer 16 · answered May 31 '16 at 11:14

.at-counter-box {
    border: 2px solid #1ac6ff;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    font-family: 'Oswald Sans', sans-serif;
    color:#000;
}
.at-counter-box-content {
    position: relative;
}
.at-counter-content span {
    font-size: 40px;
    font-weight: bold ;
    text-align: center;
    position: relative;
    top: 55px;
}

score 1 · Answer 17 · 2017-06-13T05:16:00.520

1

   <head>
       <style>

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       </style>
   </head>

    <body>
       <div id="circle"></div>
   </body>

simple and novice :)

edited Jun 13 '17 at 05:16

answered Mar 13 '17 at 19:51

score 0 · Answer 18 · answered May 31 '16 at 11:01

0

<div class="at-counter-box-content">

  <div class="at-counter-content">

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

answered May 31 '16 at 11:01

shashi kumar

41
5

3

Although this code may answer the question, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight May 31 '16 at 12:04

score 0 · Answer 19 · answered May 29 '17 at 01:04

If you're using sass to write your CSS you can do:

@mixin draw_circle($radius){
  width: $radius*2;
  height: $radius*2;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-circle {
  @include draw_circle(25px);
  background-color: red;
}

Which outputs:

.my-circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background-color: red;
}

Try it here: https://www.sassmeister.com/

How to draw circle in html page?

19 Answers19

Linked

Related