ImagesLesson 82Free preview

Rounded Images

This lesson is part of How To · All levels

Summary

Rounded images are created with border-radius to soften angles or form a circle. Rounded corners use pixel or percentage values, whereas the perfect circle requires the same width and height and a 50% radius.

Key points

Border-radius: 16px rounds the image corners.
Border-radius: 50% on a square element produces a circle.
The width and height should be the same for a symmetrical circle.
Object-fit: cover prevents the image from stretching inside the circle.
The percentage value is calculated against the dimensions of the element, so the result can be elliptical if the ratio is not the same.

Full lesson

Code examples and quizzes

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