What is shape-outside in css

CssConceptBeginner · 3 min read

CSS shape-outside: What It Is and How to Use It

shape-outside in CSS defines a shape around an element that controls how inline content like text wraps around it. It lets you create non-rectangular text flow by specifying shapes such as circles, polygons, or images as boundaries for text wrapping.

⚙️

How It Works

Imagine you have a photo on a page and you want the text to flow around it, but not just in a square box. shape-outside lets you tell the browser the exact shape around which the text should wrap. Instead of text hugging a rectangle, it can follow a circle, an ellipse, or any polygon you define.

It works by defining a shape on the floated element. The browser then uses this shape as the boundary for wrapping inline content like paragraphs. This is like placing a cut-out shape on a table and arranging papers around it so they fit snugly along the shape's edges.

💻

Example

This example shows a floated circle shape that text wraps around:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>shape-outside Example</title>
<style>
  .circle {
    float: left;
    width: 150px;
    height: 150px;
    margin: 0 1rem 1rem 0;
    background: #4a90e2;
    shape-outside: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
  }
  p {
    max-width: 400px;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>
</head>
<body>
  <div class="circle"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet eros nec urna dapibus blandit. Proin vitae justo at sapien cursus convallis. Vivamus non justo sed lorem efficitur tincidunt.</p>
</body>
</html>

Output

A blue circular shape floated on the left with paragraph text wrapping smoothly around its curved edge on the right side.

🎯

When to Use

Use shape-outside when you want your text to wrap around images or shapes in a more natural and creative way than just rectangles. It is great for magazine-style layouts, artistic web pages, or any design where text flow around shapes improves readability and visual interest.

For example, wrapping text around a circular profile photo, a polygonal logo, or an irregular shape cutout can make your page look polished and professional.

✅

Key Points

Works only on floated elements: The element must be floated for shape-outside to affect text wrapping.
Defines the wrap boundary: Text wraps around the shape you specify, not just the element's box.
Supports shapes and images: You can use basic shapes like circle, ellipse, polygon, or even an image's alpha channel.
Requires clip-path or similar for visual shape: To see the shape visually, use clip-path or border-radius.

✅

Key Takeaways

shape-outside controls how text wraps around a floated element using custom shapes.

It enables creative text flow beyond simple rectangles, improving design and readability.

Works only on floated elements and requires defining a shape like circle, polygon, or image.

Use clip-path to visually match the shape for better effect.

Ideal for wrapping text around images or decorative shapes in layouts.