?️ CSS Image Shapes

CSS Image Shapes let you move beyond boring rectangular boxes. Using properties like clip-path and shape-outside, you can cut images into circles, polygons, or custom shapes and make text wrap smoothly around them to create modern and engaging layouts.

? Quick Overview

clip-path changes the visible area of an image (how the image itself is “cut”).
shape-outside tells the browser how surrounding text should flow around an element.
float is required with shape-outside for text wrapping to work.
Common shapes: circle(), ellipse(), inset(), polygon().

? Key Concepts

Clipping: Hides parts of an image outside a defined shape using clip-path.
Text Flow: Uses shape-outside + float so content wraps along a custom outline.
Fixed Dimensions: For shape-outside, the element must have a set width and height.
Visual vs Flow Shapes: clip-path affects only the visible pixels, while shape-outside affects how text flows around the element.

? Basic Syntax

At a high level, we clip the image and then define how text should wrap around it:

? View Code Example (Syntax)

/* Define a basic custom shape for an element */
selector {
  clip-path: circle(50%);
}

/* Make surrounding text wrap around the same shape */
.selector-wrap {
  float: left;
  shape-outside: circle(50%);
}

?️ Visual Clip-Path Shape Examples

Below are the same image clipped into different shapes using clip-path:

circle()

polygon()

inset()

ellipse()

? View Code Example (clip-path shapes)

/* Same image, different clip-path shapes */
img.clip-circle {
  clip-path: circle(50% at 50% 50%);
}

img.clip-polygon {
  clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

img.clip-inset {
  clip-path: inset(10% 12%);
}

img.clip-ellipse {
  clip-path: ellipse(50% 35% at 50% 50%);
}

? Code Example with shape-outside

This example shows a circular image on the left, with text wrapping around it:

? View Code Example (shape-outside)

<!-- HTML: circular image with wrapping text -->
<img src="image.jpg" class="wrap-image" alt="Circular tech image">
<p>
  This text wraps around the circular image thanks to float, shape-outside,
  and clip-path working together.
</p>

/* CSS: enable wrapping around the circle */
.wrap-image {
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
  margin-right: 20px;
  object-fit: cover;
}

? Live Output & Explanation

This paragraph wraps neatly around the circular image. The image is floated to the left using float: left;. The shape-outside: circle(50%) property tells the browser to wrap the text along a circular boundary instead of the normal rectangular box. At the same time, clip-path: circle(50%) visually cuts the image itself into a circle so the shape looks consistent.

? What’s happening behind the scenes?

float pulls the image out of normal flow so text can sit beside it.
shape-outside defines the invisible outline that the text must follow.
clip-path defines which pixels of the image are actually visible.
Without float, shape-outside is ignored and text won’t wrap around the shape.

? Tips & Best Practices

Always set explicit width and height on elements using shape-outside so the browser can calculate the wrapping region.
Remember that shape-outside works only with floated elements (e.g., float: left; or float: right;).
Use object-fit: cover; to keep the image nicely cropped inside complex shapes.
Use clip-path when you want the image itself to appear shaped, and shape-outside when you want to control how nearby text flows.
Test shapes on small screens; you may want to remove float and shape-outside using media queries for better readability on mobile.

? Try It Yourself

Create a card layout where an image is clipped using polygon() and text wraps around the same shape using shape-outside.
Experiment with an ellipse() or a diagonal inset() shape for hero images on a landing page.
Use different float directions like float: right; or logical values like inline-start and see how the layout changes.
Combine clip-path with CSS transitions to animate between different shapes on hover.

? Starter Code for Practice

<!-- Starter HTML: custom polygon shape with wrapping text -->
<img src="image.jpg" class="shape-star" alt="Polygon shape">
<p>
  Write a long paragraph here and adjust the polygon() points to see how
  the text flow changes around your custom shape.
</p>

/* Starter CSS: replace polygon() points and experiment */
.shape-star {
  float: left;
  width: 220px;
  height: 220px;
  shape-outside: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  margin-right: 18px;
  object-fit: cover;
}