Как сделать круг
Короткий ответ
Возьмите квадрат и скруглите его на 50%:
<div style="width: 80px; height: 80px; border-radius: 50%; background: tomato;"></div>Кружок с текстом
Буквы и цифры внутри круга центрируют через 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>Только ширина
aspect-ratio: 1 держит высоту равной ширине, поэтому можно задавать один размер — например, в процентах:
<div style="width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, white, gold 40%, orange);"></div>Окружность
Для пустого кольца уберите фон и добавьте рамку:
<div style="width: 60px; height: 60px; border-radius: 50%; border: 6px solid mediumpurple;"></div>Частая ошибка
Если ширина и высота не равны, border-radius: 50% даёт овал, а не круг. То же случается, когда текст внутри растягивает элемент: у кружка с длинным текстом задайте фиксированный размер или aspect-ratio. А строчный span без display вообще не принимает ширину и высоту.
Функции из этого ответа
- border-radius — Скругляет углы элемента.
- aspect-ratio — Соотношение ширины и высоты: недостающий размер браузер вычисляет сам.
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.