CSS AdvancedLesson 66Free preview

CSS Image Shapes

This lesson is part of CSS · All levels

Summary

An image does not always have to be rectangular; we can cut it into a specific shape with `clip-path` or make text around it with `shape-outside`. The round shape for the avatar can be made simple with `border-radius: 50%`. This combination of techniques makes the page look more dynamic and editorial.

Key points

`clip-path: circle()`, `polygon()`, or `ellipse()` cut the appearance of the element following the shape
`shape-outside` makes text wrap up the area outside the shape of the floating element
`shape-outside` only works on elements with `float`
A round avatar is quite large with equal length and width.

Full lesson

Code examples and quizzes

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