CSS Shapes
CSS Shapes allow you to define geometric shapes that text can flow around. By default, text flows around a rectangular box (the margin box), but with CSS Shapes, you can make it flow around circles, ellipses, polygons, or even images.
1. The shape-outside Property
The core property is shape-outside. It defines a shape around which inline content should wrap.
Important: The element applying shape-outside must be floated (float: left or float: right).
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
}2. Basic Shapes
CSS provides functions to define shapes.
circle()
Creates a circle.
- Syntax:
circle(radius at position)
shape-outside: circle(50%); /* Circle with radius 50% of element width */
shape-outside: circle(100px at 0 0); /* 100px radius at top-left corner */ellipse()
Creates an ellipse.
- Syntax:
ellipse(radius-x radius-y at position)
shape-outside: ellipse(50% 80px);inset()
Defines an inset rectangle. This is useful for creating padding inside the shape.
- Syntax:
inset(top right bottom left round border-radius)
shape-outside: inset(10px 10px 10px 10px round 10px);polygon()
Defines a polygon using pairs of x/y coordinates.
- Syntax:
polygon(x1 y1, x2 y2, ...)
/* A triangle */
shape-outside: polygon(50% 0, 100% 100%, 0 100%);3. Shapes from Images
You can use an image with an alpha channel (transparency) to define the shape. The text will wrap around the opaque parts of the image.
.shape {
float: left;
shape-outside: url('image.png');
shape-image-threshold: 0.5; /* Defines opacity level considered "inside" */
}4. shape-margin
Adds a margin around the defined shape, pushing the text further away.
shape-margin: 20px;5. clip-path vs. shape-outside
clip-path: Cuts the element itself into a shape. It affects visibility (painting). It does not affect layout flow (text still sees a rectangle unlessshape-outsideis also used).shape-outside: Defines how other content flows around the element. It does not change the appearance of the element itself (it still looks rectangular unlessclip-pathorborder-radiusis used).
Often, they are used together:
.circle {
float: left;
width: 200px;
height: 200px;
background: red;
/* Visual shape */
clip-path: circle(50%);
/* Layout shape */
shape-outside: circle(50%);
}