Search pages

Search all CSS Showcase pages by name

CSS Shapes & Clipping

Break free from the rectangle. Create polygons, circles, and custom shapes with clip-path. Make text flow around curves with shape-outside. Design like never before.

Beyond the Box

By default, everything in CSS is a rectangle. But with clip-path and shape-outside, you can create circular buttons, diagonal sections, polygon cards, and text that wraps around custom shapes. Let's escape the box!

Four Fundamental Shapes
clip-path clips an element to a specific shape. shape-outside makes text flow around a shape. Together, they unlock non-rectangular design.
Circle
Triangle
Hexagon
Star
css
clip-path: Clips (cuts) an element to a specific shape — anything outside the region is hidden
shape-outside: Makes text flow around a shape on floated elements — magazine-style wrapping

clip-path Basics

The clip-path property lets you define a clipping region for an element. Anything outside the region is hidden.

Basic Shape Functions
CSS provides three built-in shape functions: circle(), ellipse(), and inset(). Each takes different parameters to define the clipping region.
circle()
ellipse()
inset()
css

Polygon Shapes

The polygon() function is where things get really creative. Define any shape using x,y coordinate pairs.

Polygon Gallery
Each polygon is defined by a series of x,y points. Hover to enlarge. Use tools like Clippy to visually create clip-path coordinates.
Triangle
Diamond
Hexagon
Octagon
Star
Arrow
css

Real-World Examples

clip-path shines in production — diagonal hero sections, shaped profile images, and interactive hover reveals.

Hero Section with Diagonal Edge
A diagonal clip-path at the bottom creates a modern, dynamic hero section that breaks the grid.

Welcome to Our Site

Creating dynamic, modern layouts with CSS shapes

css
Shaped Profile Images
Clip-path creates distinctive profile image shapes — circles, hexagons, and iOS-style squircles.
AB

circle()

CD

polygon()

EF

inset()

css
Image Reveal on Hover
Transition clip-path to create an expanding circle reveal. Hover over the shape to see it grow.
Hover Me
css

shape-outside: Text Flow

The shape-outside property controls how text wraps around floated elements. Create magazine-style layouts with text flowing around circles, polygons, or images.

Text Around Circle
Float an element with shape-outside: circle() to make text wrap naturally around the curved edge.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

css
Text Around Polygon
Combine clip-path and shape-outside with the same polygon coordinates for perfect visual and text wrapping.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

css

Animated Shapes

Combine clip-path with transitions and animations for eye-catching effects. clip-path is animatable when both states have the same number of points.

Shape Morphing, Pulsing & Spinning
Hover the first shape to morph it. The second pulses with a keyframe animation. The third spins using transform.
Hover
Pulse
Spin
css

Browser Support & Best Practices

clip-path and shape-outside enjoy excellent modern browser support. Follow these best practices for production use.

Feature Detection with @supports
Always design with clip-path as an enhancement — elements display as rectangles in unsupported browsers.
  • clip-path: Chrome 55+, Firefox 54+, Safari 9.1+
  • shape-outside: Chrome 37+, Safari 10.1+, Firefox 62+
  • Fallback: Elements without clip-path support display as rectangles — ensure your design still works!
css
Performance & Accessibility Tips
clip-path is GPU-accelerated, but complex polygons with hundreds of points can slow rendering.
  • GPU acceleration: clip-path is GPU-accelerated and performs well
  • Avoid complex polygons: Hundreds of points can slow down rendering
  • Ensure readability: Don't clip text content — it might be hard to read
  • Touch targets: Make sure clipped buttons/links are still easy to tap
  • Screen readers: Clipped content is still read by assistive tech
  • Start simple: Begin with basic shapes before complex polygons
css