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!
Two Main Properties
- clip-path: Clips (cuts) an element to a specific shape
- shape-outside: Makes text flow around a shape
clip-path Basics
The clip-path property lets you define a clipping region for an element. Anything outside the region is hidden.
Basic Shapes
/* Circle - radius at center */
.circle {
clip-path: circle(50%);
}
/* Ellipse - horizontal and vertical radius */
.ellipse {
clip-path: ellipse(50% 30% at 50% 50%);
}
/* Inset - rectangle with optional rounded corners */
.inset {
clip-path: inset(20px 20px 20px 20px round 20px);
}Polygon Shapes
The polygon() function is where things get really creative. Define any shape using x,y coordinate pairs.
/* Triangle pointing up */
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Diamond shape */
.diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Hexagon */
.hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Star (5-pointed) */
.star {
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%
);
}Pro tip: Use Clippy to visually create clip-path shapes. It's a fantastic tool for experimenting with coordinates!
Real-World Examples
Hero Section with Diagonal Edge
Welcome to Our Site
Creating dynamic, modern layouts with CSS shapes
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 5rem 2rem 8rem;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
/* Diagonal bottom edge */
}Circular Profile Images
.profile-circle {
clip-path: circle(50%);
}
.profile-hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Squircle (rounded square) - iOS-style */
.profile-squircle {
clip-path: inset(0 0 0 0 round 30%);
}Image Reveal on Hover
.image {
clip-path: circle(20% at 50% 50%);
transition: clip-path 0.5s ease;
}
.image:hover {
clip-path: circle(70% at 50% 50%);
/* Expands on hover */
}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
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.
.float-circle {
width: 200px;
height: 200px;
float: left;
margin-right: 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
shape-outside: circle(50%);
/* Text flows around the circle */
}Text Around Polygon
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.
.float-diamond {
width: 200px;
height: 200px;
float: left;
margin-right: 2rem;
background: linear-gradient(135deg, #f093fb, #f5576c);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Both clip-path and shape-outside for perfect wrapping */
}Animated Shapes
Combine clip-path with transitions and animations for eye-catching effects.
/* Shape morphing on hover */
.morph {
clip-path: circle(50%);
transition: clip-path 0.5s ease;
}
.morph:hover {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Pulsing animation */
@keyframes pulse {
0%, 100% { clip-path: circle(40%); }
50% { clip-path: circle(50%); }
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}Browser Support
Browser Compatibility
- clip-path: Chrome 55+, Firefox 54+, Safari 9.1+ ✅
- shape-outside: Chrome 37+, Safari 10.1+, Firefox 62+ ✅
- Internet Explorer: Not supported ❌
Fallback strategy: Elements without clip-path support will simply display as rectangles - ensure your design still works!
/* Feature detection */
@supports (clip-path: circle(50%)) {
.fancy-shape {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
}
/* Fallback for unsupported browsers */
.fancy-shape {
border-radius: 50%; /* Simple circle fallback */
}Best Practices & Tips
Performance
- GPU acceleration: clip-path is GPU-accelerated and performs well
- Avoid complex polygons: Hundreds of points can slow down rendering
- Use transforms: Combine with
transformfor smooth animations
Accessibility
- Ensure readability: Don't clip text content - it might be hard to read
- Touch targets: Make sure clipped buttons/links are still easy to click
- Test with screen readers: Clipped content is still read by assistive tech
Design Tips
- Start simple: Begin with basic shapes before complex polygons
- Be consistent: Use similar shapes across your design for cohesion
- Less is more: A few strategic shapes beat shape overload