CSS Advanced
CSS Image Shapes
CSS lets you cut images into non-rectangular shapes and even wrap text around those shapes. This guide covers clip-path for visual clipping and shape-outside for text flow, with live examples.
Shaping Images in CSS
By default every image occupies a rectangular box. Two properties break out of that rectangle: clip-path changes the visible shape of the element, while shape-outside changes how neighbouring inline content (usually text) wraps around it.
clip-path
clip-path defines a region; anything outside the region is clipped away and not rendered. You can use basic shape functions such as circle(), ellipse(), inset() and polygon().
.circle { clip-path: circle(50%); }
.rounded { clip-path: inset(10% round 20px); }
.arrow { clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); }| Function | Shape | Example |
|---|---|---|
| circle(r at x y) | Circle | circle(50%) |
| ellipse(rx ry at x y) | Oval | ellipse(40% 50%) |
| inset(t r b l round radius) | Inset rectangle | inset(10% round 12px) |
| polygon(x y, x y, ...) | Any straight-edged shape | polygon(50% 0, 100% 100%, 0 100%) |
<!DOCTYPE html>
<html>
<head>
<style>
.row { display: flex; gap: 16px; }
.row img { width: 140px; height: 140px; object-fit: cover; }
.circle { clip-path: circle(50%); }
.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chevron { clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); }
</style>
</head>
<body>
<div class="row">
<img class="circle" src="https://picsum.photos/id/1035/140/140" alt="">
<img class="triangle" src="https://picsum.photos/id/1043/140/140" alt="">
<img class="chevron" src="https://picsum.photos/id/1050/140/140" alt="">
</div>
</body>
</html>clip-path animates and transitions smoothly between two shapes that have the same number of points, which is great for hover reveal effects.
shape-outside
shape-outside controls the geometry that inline text wraps around a floated element. Note that shape-outside only affects text flow, not the visible pixels, so it is usually paired with clip-path to make the visual match the wrap.
<!DOCTYPE html>
<html>
<head>
<style>
.float-img {
float: left;
width: 160px;
height: 160px;
margin: 0 20px 10px 0;
object-fit: cover;
shape-outside: circle(50%);
clip-path: circle(50%);
}
p { font: 15px/1.6 sans-serif; }
</style>
</head>
<body>
<img class="float-img" src="https://picsum.photos/id/1062/160/160" alt="">
<p>Notice how the text follows the curved edge of the circular image instead of a rectangular box. The shape-outside property defines the flow geometry while clip-path trims the visible pixels so the two agree. Keep reading to see the lines gently curve back to the left as they clear the bottom of the circle. This technique is ideal for magazine-style article layouts.</p>
</body>
</html>shape-outside requires the element to be floated. Without a float declaration it has no effect.
Key points
- clip-path clips the visible shape of an element using circle, ellipse, inset or polygon.
- polygon() lets you build any straight-edged shape from coordinate pairs.
- clip-path transitions smoothly when both shapes have the same point count.
- shape-outside changes how text wraps around a floated element, not its pixels.
- Pair shape-outside with clip-path so the wrap and the visible image match.