How to draw circle in html page?

HtmlCssGeometryCss Shapes

Html Problem Overview

How do you draw a circle using HTML5 and CSS3?

Is it also possible to put text inside?

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

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()

Solution 3 - Html

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.

Solution 4 - Html

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>

Solution 5 - Html

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).

Solution 6 - Html

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

Solution 7 - Html

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.

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


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

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.

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


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

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:

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


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

    display: flex;
    align-items: center;
}

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

Solution 8 - Html

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.

Solution 9 - Html

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>

Solution 10 - Html

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

Solution 11 - Html

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

  1. border-radius
  2. clip-path
  3. html entity
  4. pseudo element
  5. radial-gradient
  6. svg circle & path
  7. canvas arc()
  8. img tag
  9. 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>

Solution 12 - Html

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


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

Solution 13 - Html

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.

Solution 14 - Html

.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;
}

Solution 15 - Html

   <head>
       <style>

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

simple and novice :)

Solution 16 - Html

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);

Solution 17 - Html

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

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

      <span>40%</span>

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

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

Solution 18 - Html

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/

Solution 19 - Html

  • No width and height requirement (specify just whichever you prefer)
  • No SVG, canvas or Unicode

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


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

Borwser support:

  • Chrome/Edge 88+
  • Firefox 83+ behind a flag
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Geometry Solutions
Recommended Css Shapes Solutions

Previous Solution:

In python, why use logging instead of print?

PythonLoggingPrinting

Next Solution:

Making your .NET language step correctly in the debugger

.NetVisual StudioVisual Studio-2010DebuggingClr

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSergey MetlovView Question on Stackoverflow
Solution 1 - HtmlryanosheaView Answer on Stackoverflow
Solution 2 - HtmljkjView Answer on Stackoverflow
Solution 3 - HtmlAlex - GlassEditor.comView Answer on Stackoverflow
Solution 4 - HtmlLea VerouView Answer on Stackoverflow
Solution 5 - HtmlMattAllegroView Answer on Stackoverflow
Solution 6 - HtmlSunnyView Answer on Stackoverflow
Solution 7 - HtmlThat guyView Answer on Stackoverflow
Solution 8 - HtmlfluffyView Answer on Stackoverflow
Solution 9 - HtmllachlanjcView Answer on Stackoverflow
Solution 10 - HtmlBardtView Answer on Stackoverflow
Solution 11 - HtmldabengView Answer on Stackoverflow
Solution 12 - HtmlMukhtarView Answer on Stackoverflow
Solution 13 - HtmlDanView Answer on Stackoverflow
Solution 14 - Htmlshashi kumarView Answer on Stackoverflow
Solution 15 - Htmluser2768308View Answer on Stackoverflow
Solution 16 - HtmlGTodorovView Answer on Stackoverflow
Solution 17 - Htmlshashi kumarView Answer on Stackoverflow
Solution 18 - HtmlRimianView Answer on Stackoverflow
Solution 19 - HtmlArturView Answer on Stackoverflow