CSS Shapes: Creating Non-Rectangular Layouts in Modern Web Development

What is the CSS Shapes Module?

The CSS Shapes Module defines geometric shapes that can be applied to floated elements, allowing inline content to wrap around non-rectangular areas. Unlike traditional layouts where text always flows around rectangular boxes, CSS Shapes enables content to contour around circles, ellipses, polygons, and even custom paths derived from images.

The web has been built on rectangles since its inception. From the earliest HTML tables to modern CSS Grid layouts, everything we design fits neatly into boxes. But design has always been about breaking boundaries--and CSS Shapes gives us the tools to do exactly that. This powerful module enables text to flow around non-rectangular elements, creating layouts that feel organic, dynamic, and visually compelling.

Whether you're wrapping text around a circular profile image, creating magazine-style layouts with complex polygons, or building immersive storytelling experiences, CSS Shapes transforms how content and imagery interact on the web. This shift from "boxes with content inside" to "content that responds to form" represents a fundamental change in how we approach modern web design.

Key Properties

• shape-outside: The primary property that defines the actual shape geometry for text wrapping
• shape-margin: Creates a gutter between your defined shape and the wrapping content for visual breathing room and improved readability
• shape-image-threshold: Controls which pixels from an image define the shape based on alpha channel transparency

Unlike visual properties like CSS clip-path that only change what users see, shape-outside affects how content flows around elements--making it essential for creating sophisticated print-like layouts on the web.

Basic Shape Functions

circle()

The circle() function creates circular shapes defined by a radius and optional position:

/* Circle with radius */
.shape-circle {
 shape-outside: circle(150px at center);
 shape-outside: circle(50%); /* Percentage relative to element box */
 shape-outside: circle(100px at 30% 40%); /* Offset from top-left */
}

The circle is the most common shape for wrapping text, perfect for profile images, avatars, and circular callout elements. Percentage values make it easy to create shapes that scale proportionally with responsive designs. This function is highly performant and should be your first choice for circular layouts.

ellipse()

Ellipse creates stretched circles defined by two radii (horizontal and vertical):

/* Ellipse with separate x and y radii */
.shape-ellipse {
 shape-outside: ellipse(100px 50px); /* 100px wide, 50px tall */
 shape-outside: ellipse(50% 30% at center);
}

Ellipses are ideal for creating oval frames, horizontal banners, and elongated decorative elements. The at keyword allows positioning the ellipse anywhere within the element box, giving you precise control over placement within your responsive layouts.

inset()

The inset() function defines rectangular shapes with customizable edge offsets:

/* Inset from all edges */
.shape-inset {
 shape-outside: inset(20px); /* 20px from all edges */
 shape-outside: inset(10px 20px 30px 20px); /* Top, Right, Bottom, Left */
 shape-outside: inset(10px round 20px); /* With border-radius */
}

Inset is particularly useful for creating "cutouts" from content areas or when you want text to wrap around a smaller rectangular region within a larger element. Combined with the round keyword, you can create rounded rectangular shapes for modern UI design.

polygon()

Polygon creates multi-point shapes defined by coordinate pairs:

/* Triangle */
.shape-triangle {
 shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Star shape */
.shape-star {
 shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
 79% 91%, 50% 70%, 21% 91%, 32% 57%,
 2% 35%, 39% 35%);
}

Polygon is the most flexible basic shape function, allowing creation of any polygon form. For complex shapes, use coordinate tools like the CSS clip-path maker by Bennett Feely or browser DevTools to visualize and refine your polygon points.

rect() and xywh()

Modern browsers support the rect() and xywh() functions for defining rectangles:

/* Traditional rect */
.shape-rect {
 shape-outside: rect(10px, 100px, 90px, 10px);
}

/* Modern xywh with border-radius support */
.shape-xywh {
 shape-outside: xywh(10px, 10px, 100px, 80px, round 10px);
}

The xywh() function offers more intuitive syntax and built-in border-radius support, making it the preferred choice for new projects in supporting browsers.

Creating Shapes from Images

One of CSS Shapes' most powerful features is the ability to derive shapes from images with alpha channels, allowing text to flow around any form that can be captured in an image. This technique enables sophisticated editorial layouts that were previously difficult to achieve without JavaScript workarounds:

/* Basic image shape */
.shaped-image {
 float: left;
 width: 300px;
 shape-outside: url('profile.png');
}

/* With threshold control */
.shaped-image-threshold {
 float: left;
 width: 300px;
 shape-outside: url('profile.png');
 shape-image-threshold: 0.3;
 shape-margin: 15px;
}

Understanding Alpha Channels

Images with alpha channels (PNG, WebP, GIF) store transparency information for each pixel. The shape-image-threshold property determines which pixels contribute to the shape boundary:

• threshold: 0.0 - Only fully transparent pixels are excluded from the shape
• threshold: 0.5 - Pixels with less than 50% opacity are excluded
• threshold: 1.0 - Only fully opaque pixels are included in the shape

This allows you to create shapes from images with soft edges or partial transparency, though for precise control, well-defined hard edges typically work best.

CORS and Image Requirements

For shape-outside to work with images, the image must be CORS-compatible. Same-origin images work without additional configuration, but cross-origin images require proper CORS headers to be set on the server. Without CORS compliance, browsers will treat the shape-outside value as none, resulting in standard rectangular wrapping.

As noted by the experts at CSS-Tricks, creating shapes from images opens possibilities for editorial layouts and creative expressions that were previously impossible to achieve without JavaScript.

For managing complex styling in your projects, consider exploring styled-components vs Emotion for component-level styling strategies that complement CSS Shapes.

The Relationship Between shape-outside and clip-path

While shape-outside and clip-path might seem similar, they serve fundamentally different purposes in web design:

/* Both properties can work together */
.shaped-clipped-element {
 float: left;
 width: 200px;

 /* Text flows around circle */
 shape-outside: circle(50%);

 /* Element appears as circle */
 clip-path: circle(50%);

 shape-margin: 20px;
}

When used together, as demonstrated in web.dev's CSS guide, clip-path handles visual presentation while shape-outside controls text flow, enabling complete circular elements with organic text wrapping. This combination is powerful for creating sophisticated visual designs where both the appearance and the surrounding content flow work harmoniously.

Understanding the distinction between these properties is essential for advanced layout techniques. Many modern web development projects benefit from using both properties in concert to achieve print-quality layouts on the web.

Modern CSS: The corner-shape Property

CSS in 2025 introduces the corner-shape property, expanding what is possible with CSS shapes for modern web development:

/* Modern corner shaping */
.modern-element {
 /* Different shapes for each corner */
 corner-shape: bevel 20px;
 corner-shape: scoop 15px;
 corner-shape: notch 10px;
}

/* Complex corner combinations */
.complex-corners {
 corner-top-left: bevel 20px;
 corner-top-right: scoop 15px;
 corner-bottom-right: notch 10px;
 corner-bottom-left: round 30px;
}

This experimental feature, highlighted in the Chrome Dev CSS Wrapped 2025, enables custom corner treatments beyond simple border-radius, opening new possibilities for shape-based design without complex clip-path or polygon workarounds.

path() Function

The path() function accepts SVG path data, opening possibilities for complex curves that basic shapes cannot achieve:

/* Complex curve path */
.shape-path-curve {
 shape-outside: path('M 10 50 Q 30 10 50 50 T 90 50');
}

Path support is expanding in modern browsers and represents the future of shape definition, enabling smooth curves and complex organic forms that polygons cannot achieve. According to the W3C CSS Snapshot 2025, path() is supported in Chrome 105+, Firefox 113+, Safari 15.4+, and Edge 105+.

These modern CSS features demonstrate the evolving capabilities of web standards, enabling designers and developers to create increasingly sophisticated layouts without relying on workarounds or JavaScript libraries. For advanced JavaScript techniques that complement CSS Shapes, explore our guide on how to use proxy in Next.js.

Best Practices and Performance

Progressive Enhancement

CSS Shapes is a progressive enhancement--non-supporting browsers gracefully degrade to rectangular wrapping. This means you can confidently use CSS Shapes in your projects knowing that unsupported browsers will still render a functional layout:

.shaped-element {
 float: left;
 width: 200px;
 shape-outside: circle(50%);
 /* Unsupported browsers ignore shape-outside,
 text wraps around rectangular box */
}

Design with this in mind: the rectangular fallback should still look acceptable while enhanced browsers enjoy the improved layout. This approach ensures your web development projects work reliably across all browsers.

Performance Considerations

Complex shapes, especially those derived from large images or detailed polygons, can impact rendering performance:

1. Simplify polygons - Use fewer points when possible to reduce calculation overhead
2. Prefer basic shapes - circle(), ellipse(), and inset() are more efficient than polygon()
3. Cache image-derived shapes - Avoid dynamically changing shape-outside in animations
4. Use will-change sparingly - Only animate shape properties when necessary

/* Performance-optimized shapes */
.efficient-shape {
 shape-outside: circle(100px); /* More efficient than polygon approximation */
}

/* Only animate when necessary */
.complex-shape {
 will-change: shape-outside;
 transition: shape-outside 0.3s ease;
}

Mobile Considerations

On mobile devices with smaller screens and different performance characteristics:

• Reduce shape complexity for better performance on limited hardware
• Adjust shape-margin appropriately for touch targets and readability
• Test breakpoints to ensure shapes work correctly at all viewport sizes
• Consider whether shapes enhance or potentially hinder usability on small screens

For responsive web development projects, testing CSS Shapes across devices is essential to ensure optimal user experience.

Creative Applications and Examples

Magazine-Style Text Wrap

Create editorial layouts that wrap text around images for sophisticated visual presentations:

.editorial-image {
 float: left;
 width: 40%;
 shape-outside: polygon(
 50% 0%, 100% 25%, 100% 75%, 50% 100%,
 0% 75%, 0% 25%
 );
 shape-margin: 30px;
}

This technique enables content to flow organically around images, creating the professional editorial feel found in print magazines. When combined with responsive design principles, these layouts work across device sizes.

Multiple Image Shapes

Flow text around multiple images in a single layout for complex compositions:

.gallery-layout {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 2rem;
}

.gallery-layout img:first-child {
 float: left;
 width: 50%;
 shape-outside: url('portrait.webp');
 shape-margin: 2%;
}

.gallery-layout img:nth-of-type(2) {
 float: right;
 width: 45%;
 shape-outside: url('album.webp');
 shape-margin: 2%;
}

Faux Centered Images

Create the illusion of text wrapping around both sides of a centered image by splitting it:

/* Left half floated right */
.left-half {
 float: right;
 width: 40%;
 shape-outside: url('image-left.webp');
}

/* Right half floated left */
.right-half {
 float: left;
 width: 40%;
 shape-outside: url('image-right.webp');
}

This technique, as demonstrated on CSS-Tricks, enables text on both sides of a central image, creating dynamic editorial layouts that draw the eye and break away from traditional web design patterns.

Text Between Shapes

Create sophisticated layouts with text flowing between multiple shaped elements:

.shaped-container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
}

.shaped-container img:nth-child(1) {
 float: right;
 width: 100%;
 shape-outside: url('shape-left.webp');
 shape-margin: 20px;
}

.shaped-container img:nth-child(3) {
 float: left;
 width: 100%;
 shape-outside: url('shape-right.webp');
 shape-margin: 20px;
}

These advanced layout techniques demonstrate the creative potential of CSS Shapes for modern web development projects seeking to differentiate their visual design.

Sources

1. MDN Web Docs - CSS Shapes Overview - Comprehensive official documentation covering shape-outside, shape-margin, and shape-image-threshold properties with live examples
2. web.dev - Paths, Shapes, Clipping and Masking - Google's official CSS learning resource covering modern CSS shape techniques and performance considerations
3. CSS-Tricks - Getting Creative With shape-outside - Advanced creative techniques for using CSS shapes in real-world design scenarios
4. CSS-Tricks - shape-outside Almanac - Complete reference for shape-outside property syntax and examples
5. Chrome Dev - CSS Wrapped 2025 - Latest CSS features including the new corner-shape property for 2025
6. W3C - CSS Snapshot 2025 - Official specification references and standards documentation