CSS · Visual Effects

CSS Shapes

Wrap text around custom shapes with shape-outside

Find videos you like?

Save to resource drawer for future reference!

CSS Shapes

Text wrapping around custom shapes

shape-outside = Text Flow! 🌊

The shape-outside property makes text wrap around custom shapes instead of just rectangles. Perfect for magazine-style layouts!

Key Properties:

shape-outside - Defines the shape

shape-margin - Space around shape

shape-image-threshold - Image transparency threshold

shape-outside Values

Different shape types

circle()

Text wraps around circle

shape-outside: circle(50%);

ellipse()

Text wraps around ellipse

shape-outside: ellipse(50% 30%);

polygon()

Text wraps around custom polygon

shape-outside: polygon(0 0, 100% 0, 50% 100%);

url()

Text wraps around image transparency

shape-outside: url(image.png);

Important!

shape-outside only works with floated elements!

Interactive Demo

Text wrapping around circle

CSS Shapes Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>🌊 CSS Shapes Demo</h1>
      <div class="example">
        <span class="label">Text wrapping around circle</span>
        <div class="content">
          <div class="circle-shape">
            Circle
          </div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            Notice how the text flows naturally around the circular shape!
            This creates magazine-style layouts that were impossible with just CSS before.
            The shape-outside property defines the shape, and shape-margin adds spacing.
            You can use circles, ellipses, polygons, or even images.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
          </p>
        </div>
      </div>
      <div class="example">
        <span class="label">Text wrapping around triangle</span>
        <div class="content">
          <div class="polygon-shape">
            Triangle
          </div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            With polygon shapes, you can create any custom shape you want!
            The text flows around the triangular shape on the right side.
            This technique works great for creating unique, eye-catching layouts.
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Remember that shape-outside only works on floated elements, so make sure
            to add float: left or float: right to your shaped element.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Practical Tips

Making shapes work

Must be floatedfloat: left;

Add margin with shape-marginshape-margin: 20px;

Combine with clip-pathclip-path: circle(50%);

Works with imagesshape-outside: url(shape.png);

Remember

shape-outside only works on floated elements

Use shape-margin to add space around shape

Combine with clip-path for visual effect

Browser support: All modern browsers

Previous Topic

Masks & Clipping

clip-path, mask-image, mask-mode, and creating complex shapes and effects.

Next Topic

Shadows

box-shadow, text-shadow, drop-shadow(), multiple shadows, and shadow techniques.

Ask a Question

Have a question about CSS Shapes? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Visual Effects

CSS Shapes

Wrap text around custom shapes with shape-outside

Find videos you like?

Save to resource drawer for future reference!

CSS Shapes

Text wrapping around custom shapes

shape-outside = Text Flow! 🌊

The shape-outside property makes text wrap around custom shapes instead of just rectangles. Perfect for magazine-style layouts!

Key Properties:

shape-outside - Defines the shape

shape-margin - Space around shape

shape-image-threshold - Image transparency threshold

shape-outside Values

Different shape types

circle()

Text wraps around circle

shape-outside: circle(50%);

ellipse()

Text wraps around ellipse

shape-outside: ellipse(50% 30%);

polygon()

Text wraps around custom polygon

shape-outside: polygon(0 0, 100% 0, 50% 100%);

url()

Text wraps around image transparency

shape-outside: url(image.png);

Important!

shape-outside only works with floated elements!

Interactive Demo

Text wrapping around circle

CSS Shapes Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>🌊 CSS Shapes Demo</h1>
      <div class="example">
        <span class="label">Text wrapping around circle</span>
        <div class="content">
          <div class="circle-shape">
            Circle
          </div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            Notice how the text flows naturally around the circular shape!
            This creates magazine-style layouts that were impossible with just CSS before.
            The shape-outside property defines the shape, and shape-margin adds spacing.
            You can use circles, ellipses, polygons, or even images.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
          </p>
        </div>
      </div>
      <div class="example">
        <span class="label">Text wrapping around triangle</span>
        <div class="content">
          <div class="polygon-shape">
            Triangle
          </div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            With polygon shapes, you can create any custom shape you want!
            The text flows around the triangular shape on the right side.
            This technique works great for creating unique, eye-catching layouts.
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Remember that shape-outside only works on floated elements, so make sure
            to add float: left or float: right to your shaped element.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Practical Tips

Making shapes work

Must be floatedfloat: left;

Add margin with shape-marginshape-margin: 20px;

Combine with clip-pathclip-path: circle(50%);

Works with imagesshape-outside: url(shape.png);

Remember

shape-outside only works on floated elements

Use shape-margin to add space around shape

Combine with clip-path for visual effect

Browser support: All modern browsers

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Masks & Clipping

Shadows

Building Your Learning Module...

CSS Shapes

shape-outside = Text Flow! 🌊

Key Properties:

Important!

CSS Shapes Demo

Remember

Masks & Clipping

Shadows

CSS Shapes

shape-outside = Text Flow! 🌊

Key Properties:

Important!

CSS Shapes Demo

Remember