How to make a round image
Short answer
Give a square image a 50% rounding:
<img src="/media/photo-200x200.jpg" alt="Avatar" width="80" height="80" style="border-radius: 50%;">A non-square image
Set equal width and height, and object-fit: cover crops the excess without distortion:
<img src="/media/photo-400x250.jpg" alt="Avatar" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">Instead of two sizes you can set the width and aspect-ratio: 1 — the height becomes the same.
A ring around the avatar
A ring around the image is drawn with outline and an offset — it follows the rounding and does not change the element size. This often marks a user who is online or a selected profile:
<img src="/media/photo-200x200.jpg" alt="Avatar" width="64" height="64" style="border-radius: 50%; outline: 3px solid seagreen; outline-offset: 2px;">A circle with a letter
With no picture, the avatar is made from a block:
<div style="display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rebeccapurple; color: white; font-weight: 700;">A</div>Common mistake
A non-square image gets a 50% rounding without equal sizes. The result is an oval, not a circle:
<img src="/media/photo-400x250.jpg" alt="Avatar" width="128" style="border-radius: 50%;">Functions used in this recipe
- border-radius — Rounds the corners of an element.
- <img> — An image.
- object-fit — How the picture of an `<img>` or `<video>` fits into the element's box.
- aspect-ratio — The ratio of width to height: the browser computes the missing dimension.