Think Outside the Box: Creating Shapes with CSS clip-path & shape-outside | by Ananya Kittane Yogananda | Samsung Internet Developers | Aug, 2025

Press enter or click to view image in full size

Most web layouts live inside neat rectangles — but what if you could think outside the box?

With CSS properties like clip-path and shape-outside, you can transform your images and content into dazzling shapes that break free from the box ( literally!)

In this post, we will explore how we could:

1. Clip images into circles, stars, and polygons
2. Add interactive animations to these shapes
3. Wrap text organically around custom shapes to create stunning, editorial style UIs

For all of these examples, you could use any editor to follow along — I’ve used CodePen for my demos.

At its core, clip-path lets you define a visible region of an element. It doesn’t affect how text flows or how readers interpret content — it’s purely visual masking. We could think of clip-path as akin to cutting a shape (circle, triangle etc.,) from a rectangular piece of paper.

shape-outside on the other hand, lets us define a shape — which may be non-rectangular and let’s text flow around the floated element’s shape. It helps us create magazine-style layouts.

Usage

Use clip-path when you want to create custom shapes or masks for an element.

Use shape-outside when you want to wrap text or other content around a custom shape.

Use both clip-path and shape-outside together when you want to clip an element to one shape while wrapping content around another shape. This is useful for advanced designs where the element and its surrounding content interact in unique ways.

Syntax Overview

/* clip-path */
.element {
clip-path:  |  |  | ;
}
/* shape-outside */
.element {
shape-outside:  |  |  |  |  | ;
float: left; /* Required for text wrapping */
}
/* Using shape-outside & clip-path together */
.element {
clip-path: ;
shape-outside: ;
float: left;
}

Example values:

Shape-function: circle(), ellipse(), polygon(), inset()

Geometry Box: content-box, padding-box, border-box

For more detailed overview of the syntax, take a look at shape-outside and clip-path’s MDN articles.

The Simplest Shape: Circles

Let’s begin with the most common and easiest shape — a circle. This is perfect for avatars and logos.

Clipping an Image into a Circle

.circle {
width: 200px;
height: 200px;
object-fit: cover;
clip-path: circle(50%);
}

Spice things up: Creating different polygons

Once we’ve mastered circles, we can create more interesting polygons like triangles, diamonds, trapeziums using clip-path() and polygon().

    
Triangle

  

    
Diamond

  

    
Trapezium

  

body {
font-family: sans-serif;
background: #fafafa;
padding: 2rem;
text-align: center;
}
.gallery {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
}
img {
width: 200px;
height: 200px;
object-fit: cover;
border: 3px solid #ccc;
transition: clip-path 0.3s ease;
}
/* Shapes using clip-path */
.triangle {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.trapezium {
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

Note: When applying clip-path to images, using object-fit: cover ensures they fill the shape properly without distortion.

Want to create your own shapes?

Try clippy- CSS clip-path maker. It helps create visually crafty shapes, from simple triangles to more intricate polygons.

Level up: Adding interactivity

So far we’ve used clip-path to statically crop images into different shapes. But CSS lets us go one step further — we can animate shapes using transitions!

Example: Hovering over a circular image that morphs into a diamond This can be a subtle but engaging visual cue, great for things like testimonials, profile images etc.

  
  

      src="https://images.unsplash.com/photo-1541515929569-1771522cbaa9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Z2lybCUyMHdpdGglMjBjYW1lcmF8ZW58MHx8MHx8fDA%3D"
    alt="Morphing Image"
    class="clip-circle-to-diamond"  />
  

.clip-animate-container {
text-align: center;
margin: 2rem 0;
}
.image-wrapper{
position: relative;
width:219px;
height:219px;
}
.clip-circle-to-diamond {
width: 200px;
height: 200px;
object-fit: cover;
transition: clip-path 0.5s ease-in-out;
clip-path: circle(50%);
border: 4px solid #ccc;
border-radius: 12px;
pointer-events: none;
}
/* Morph into a diamond on hover */
.image-wrapper:hover .clip-circle-to-diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

The .image-wrapper CSS class is added to prevent flickering caused by shape changes — an important consideration for accessibility and for users sensitive to rapid visual shifts.

You can have a look at the output and the code here — Hover demo.

I’ve also created a more advanced animation example. You could use this –animation demo — clip-path() to view and play around.

Magazine-style layouts with shape-outside

For the longest time, web content has lived inside rigid rectangles. Thanks to modern CSS, we now have a tool that brings editorial elegance and fluidity to web layouts. Meet shape-outside!

Let’s see how we could float a circular image and have the paragraph naturally flow around it — creating a layout you’d usually expect from a magazine or a newsletter.

These images float side by side, and the text wraps around both to simulate a multi-column layout of headshots in an editorial feature. These images float side by side, and the text wraps around both to simulate a multi-column layout of headshots in an editorial feature. How amazing is the capability to just use CSS to create such fluid layouts. The web isn't just a rectangle anymore. And nope, we dont need just figma or other design tools to do any of these fancy stuff! These images float side by side, and the text wraps around both to simulate a multi-column layout of headshots in an editorial feature. These images float side by side, and the text wraps around both to simulate a multi-column layout of headshots in an editorial feature. How amazing is the capability to just use CSS to create such fluid layouts. The web isn't just a rectangle anymore. And nope, we dont need just figma or other design tools to do any of these fancy stuff. The web isn't just a rectangle anymore. And nope, we dont need just figma or other design tools to do any of these fancy stuff.
The web isn't just a rectangle anymore. And nope, we dont need just figma or other design tools to do any of these fancy stuff.

.circle-small {
float: left;
width: 120px;
height: 120px;
shape-outside: circle(50%);
clip-path: circle(50%);
object-fit: cover;
margin: 0 1rem 1rem 0;
}
/* Media query for smaller screens (e.g., mobile) */
@media (max-width: 768px) {
.circle-small {
width: 30%; 
margin: 0 0.5rem 0.5rem 0; 
}
p {
font-size: 14px; 
}
}

Browser Support

Both shape-outside (except ) and clip-path are widely supported across all the browsers.

Conclusion

We learnt how we could break the grid and make the web look interesting with just simple CSS. I hope this article inspires you to try out new stuff and make fancy-looking UIs outside of the regular box!