0Pricing
CSS Academy · Lesson

shape-outside for Text Wrapping

Wrap text around custom shapes using shape-outside on floated elements.

CSS Shapes Module

The CSS Shapes module allows text to wrap around non-rectangular shapes. The primary property is shape-outside, which defines the shape text flows around.

shape-outside Requirements

shape-outside only works on floated elements. The element must be floated (left or right) for adjacent text to wrap around the defined shape.

.circle-float {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%); /* visually clips the element too */
  margin-right: 16px;
}

All lessons in this course

  1. clip-path with polygon() and circle()
  2. shape-outside for Text Wrapping
  3. Animating clip-path Shapes
  4. CSS Masks vs Clip-path
← Back to CSS Academy