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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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.
<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>
shape-outside: circle()
Text wraps around a circular path defined relative to the floated element:
<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>
shape-outside: ellipse()
Text wraps around an elliptical path:
<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>
shape-outside: polygon()
Text wraps around a polygon path — enabling complex editorial layouts:
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
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:
<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>
shape-margin
shape-margin adds a gap between the shape-outside path and the wrapping text:
<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>
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:
<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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
- clip-path with polygon() and circle()
- shape-outside for Text Wrapping
- Animating clip-path Shapes
- CSS Masks vs Clip-path