How to draw circle in html page?

user_377133 0
Viewed 333334

How do you draw a circle using HTML5 and CSS3?

Is it also possible to put text inside?

css-shapes geometry css html
19 Answers

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>

user_95071630

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>

user_31523490

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);
user_15490920
  • 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
user_29876890
Related