CSS Academy · Lesson

shape-outside for Text Wrapping

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

shape-outside for Text Wrapping is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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;
}

shape-outside: circle()

Text wraps around a circular path defined relative to the floated element:

.profile-image {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  border-radius: 50%; /* visual match */
}

shape-outside: ellipse()

Text wraps around an elliptical path:

.cutout {
  float: right;
  width: 250px;
  height: 300px;
  shape-outside: ellipse(50% 50% at 50% 50%);
}

shape-outside: polygon()

Text wraps around a polygon path — enabling complex editorial layouts:

.diagonal-image {
  float: left;
  width: 300px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

shape-outside with Image

Pass a URL to use the image's alpha channel as the shape boundary. Text wraps around the non-transparent areas of the image:

.character {
  float: left;
  width: 300px;
  shape-outside: url("character.png");
  shape-image-threshold: 0.5; /* alpha threshold */
}

shape-margin

shape-margin adds a gap between the shape-outside path and the wrapping text:

.shape-float {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 16px;
}

shape-image-threshold

When using an image for shape-outside, shape-image-threshold sets the alpha transparency cutoff (0 to 1) that defines the shape boundary.

Design Applications

CSS Shapes enable magazine-style editorial layouts, pull quotes with shaped image wrapping, and drop-cap areas with irregular text flow — effects previously only achievable in print design or with SVG.

Browser Support

shape-outside with basic shapes (circle, ellipse, polygon, inset) is supported in all modern browsers. shape-outside with image URL has broader support but may vary. Always test.

Practical Example: Drop Cap

A triangular drop-cap area where text wraps around a large decorative letter:

.drop-cap {
  float: left;
  font-size: 6rem;
  line-height: 0.8;
  shape-outside: polygon(0 0, 1em 0, 1em 1em);
  margin: 0 8px 0 0;
}

Quick Check

What is required for shape-outside to work on an element?

Recap

shape-outside enables text to flow around non-rectangular shapes defined on floated elements. Shapes can be circles, ellipses, polygons, or image alpha channels. Use shape-margin for breathing room. Combine with clip-path to visually match the element to its defined shape.

Frequently asked questions

Is the “shape-outside for Text Wrapping” lesson free?

Yes — the full text of “shape-outside for Text Wrapping” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “shape-outside for Text Wrapping”?

Wrap text around custom shapes using shape-outside on floated elements. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “shape-outside for Text Wrapping” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy