MoreLesson 197Free preview

Circles

This lesson is part of How To · All levels

Summary

Circles in CSS are made of square elements whose corners are completely curved with a border-radius: 50%. This form is often used for an avatar, status icon, or notification number. To keep the contents right in the middle, combine the same width and height with the flexbox.

Key points

The width and height must be the same for the result of the border-radius: 50% is actually circular
Use a flex display with align-items and justify-content center to focus content
The size of the circle can be made responsive by clamp() or aspect-ratio: 1/1
Decorative circles should not compromise the contrast of the text within them

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.