How to make a circle
Short answer
Take a square and round it by 50%:
<div style="width: 80px; height: 80px; border-radius: 50%; background: tomato;"></div>A circle with text
Letters and numbers inside a circle are centered with grid:
<div style="display: flex; gap: 8px;">
<span style="display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: royalblue; color: white; font-weight: 700;">AS</span>
<span style="display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: seagreen; color: white;">2</span>
</div>Only the width
aspect-ratio: 1 keeps the height equal to the width, so you can set just one size — in percent, for example:
<div style="width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, white, gold 40%, orange);"></div>A ring
For an empty ring remove the background and add a border:
<div style="width: 60px; height: 60px; border-radius: 50%; border: 6px solid mediumpurple;"></div>Common mistake
If the width and height differ, border-radius: 50% gives an oval, not a circle. The same happens when text inside stretches the element: give a circle with long text a fixed size or aspect-ratio. And an inline span without display ignores width and height altogether.
Functions used in this recipe
- border-radius — Rounds the corners of an element.
- aspect-ratio — The ratio of width to height: the browser computes the missing dimension.
- object-fit — How the picture of an `<img>` or `<video>` fits into the element's box.