How to draw a circle in an HTML page?

Implementing text and tailoring circle style

Text inside the circle

Inserting text inside your circular div requires the implementation of CSS positioning:

<div style="width: 100px; height: 100px; border-radius: 50%; background: blue; position: relative;">
  <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">Hello, world!</span>
</div>


This technique uses position: absolute; in conjunction with transform: translate(-50%, -50%); to center the text.

Circle style customization

Use CSS properties such as border, padding, and display to add distinct styles:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
  border: 2px solid violet;  /* Adds stylish border. Pretty cool, isn't it? */
  display: inline-block;     /* This keeps all circles inline. No more social distance! */
  padding: 10px;             /* Provides personal space to the text. Everyone needs it! */
  color: silver;             /* Text color. Because, why not? */
  text-align: center;        /* Centers the text horizontally. Making life easier! */
  line-height: 80px;      /* Adjust based on the padding. Magic! */
}


Apply color and font-size to enhance text readability and accessibility:

.circle span {
  color: teal;            /* Color of text. Ever tried teal? Now is the time! */;
  font-size: 1rem;        /*Responsive font size. Treats all screen sizes equally! */;
}


Creating circle using alternative methods

Creating circles with SVG

For more complex objects or additional visual modifications, SVG comes to the rescue:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
</svg>


The <circle> element within SVG is like the superhero of circles — created to serve its purpose.

Using the HTML5 canvas tag

If you're looking for dynamic circle rendering, the <canvas> tag and its sidekick, JavaScript, have your back:

<canvas id="canvas" width="100" height="100"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);  /* Arc? More like 'ark', because it carries the circle! */
  ctx.stroke();
</script>


The arc() function in JavaScript is like the unsung hero, quietly rendering circles within canvas.

Extras

Unicode characters and custom fonts

Ever thought of using Unicode characters or fonts that offer glyphs appearing as circles? Combine them with your text and create awesome designs.

Cross-browser compatibility

The good news is that mox and webkit prefixes are almost obsolete thanks to CSS3. Yet, validating your HTML5 and CSS3 code, and checking the compatibility with your target browsers, never hurts.

Aligning items

Use display: inline-block; or the mighty flexbox properties to align your divs, just like aligning ducks in a row!

Keeping text at center within the circle

position: absolute; along with vertical-align and calculated offsets or flexbox can help you place text within the circle. No more playing hide and seek!