Drawing Layout-Friendly Shapes with the CSS xywh() Function

You need a clipped rectangle that scales with its container. You reach for clip-path, but defining the shape feels awkward. Should you calculate inset values from each edge? What happens when the container resizes?

The CSS xywh() function solves this by letting you define rectangles the intuitive way: starting point plus dimensions. It’s now baseline-supported across all evergreen browsers, making it a reliable choice for production-ready responsive clipping.

What Is the CSS xywh() Function?

The xywh() function creates rectangular basic shapes by specifying four values: the x and y coordinates of the upper-left corner, followed by width and height. It belongs to the CSS basic shapes family alongside inset(), circle(), ellipse(), and polygon().

.element {
  clip-path: xywh(10% 10% 80% 80%);
}

This clips the element to a rectangle starting 10% from the left, 10% from the top, spanning 80% of the width and 80% of the height. All four values accept any <length-percentage> unit, making responsive clipping straightforward.

Browser Support: Production-Ready in 2025

The xywh() function reached Baseline 2024 status and works across:

• Chrome/Edge 119+
• Firefox 122+
• Safari 17.2+

This isn’t experimental technology requiring flags or polyfills. Modern CSS shapes using xywh() work reliably in every current browser your users run.

Syntax and Parameters

The function accepts four required values and one optional keyword:

clip-path: xywh(x y width height round border-radius);

Position values (x, y): Distance from the left and top edges of the reference box.

Dimension values (width, height): The rectangle’s size. These must be non-negative.

Round keyword: Optional. When included, it enables rounded corners using the same syntax as border-radius.

/* Sharp corners */
clip-path: xywh(0 0 100% 100%);

/* Uniform rounding */
clip-path: xywh(5% 5% 90% 90% round 12px);

/* Asymmetric rounding */
clip-path: xywh(0 0 100% 100% round 20px 0 20px 0);

Responsive Clipping with Percentages

The real power of xywh() emerges when you use percentage values. Unlike fixed pixel values, percentages respond to container size changes automatically.

.card-image {
  clip-path: xywh(5% 5% 90% 90% round 8px);
}

This creates a responsive clip-path layout that maintains proportional spacing regardless of the card’s dimensions. Combine with viewport units or calc() for more complex responsive patterns:

.hero-clip {
  clip-path: xywh(
    2vw 
    2vh 
    calc(100% - 4vw) 
    calc(100% - 4vh) 
    round 1rem
  );
}

xywh() vs. inset(): Choosing the Right Function

Both functions create rectangles, but they approach the problem differently.

Use inset() when you’re defining margins from each edge:

/* 20px inward from all edges */
clip-path: inset(20px);

Use xywh() when you need explicit position and size control:

/* Rectangle at specific coordinates with specific dimensions */
clip-path: xywh(50px 50px 200px 150px);

The xywh() function shines when animating shapes or when you need a rectangle that doesn’t correlate directly with the element’s edges. Moving a shape with inset() requires recalculating all four edge values. With xywh(), you adjust only the x and y coordinates.

Practical Applications

Image masks with consistent padding:

.thumbnail {
  clip-path: xywh(4% 4% 92% 92% round 6px);
}

Card corner treatments:

.feature-card {
  clip-path: xywh(0 0 100% 100% round 16px 16px 0 0);
}

Animated reveal effects:

.reveal {
  clip-path: xywh(0 0 0% 100%);
  transition: clip-path 0.3s ease-out;
}

.reveal:hover {
  clip-path: xywh(0 0 100% 100%);
}

Looking Ahead: The shape() Function

The newer shape() function offers even more flexibility for complex paths, but xywh() remains the right tool for rectangular shapes. It’s simpler, more readable, and fully supported today.

Conclusion

The CSS xywh() function provides a clean, intuitive syntax for rectangular clipping that scales naturally with responsive layouts. Its percentage-based values eliminate manual calculations when containers resize, and the familiar border-radius syntax for rounded corners keeps your code consistent.

For any clip-path layout requiring rectangles—whether static masks or animated reveals—xywh() is now the production-ready choice across all modern browsers.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..