Xywh

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().

This function offers a fundamentally different approach to defining rectangles compared to traditional methods. Instead of calculating distances from each edge, you specify where the rectangle starts (the x, y origin point) and how large it extends (width and height). This approach aligns naturally with how designers and developers think about positioning elements on a canvas.

The xywh() function works with several CSS properties including clip-path for masking elements, shape-outside for creating text flow areas, and offset-path for defining motion paths. Each use case leverages the same intuitive coordinate-based rectangle definition, making the function versatile across different layout and animation scenarios.

For projects requiring advanced shape manipulation, understanding xywh() pairs well with CSS scroll anchoring techniques and other CSS layout properties that create sophisticated responsive interfaces.

Syntax and Parameters

The xywh() function accepts four required values followed by an optional keyword for rounded corners:

xywh(x y width height round border-radius)

Position Values (x, y)

The first two values specify the upper-left corner's distance from the reference box's left and top edges. These values can use any length-percentage unit including pixels, ems, percentages, viewport units, or calc() expressions.

For example, xywh(50px 30px ...) creates a rectangle that starts 50 pixels from the left edge and 30 pixels from the top edge. Using percentages like xywh(20% 10% ...) positions the rectangle at 20% from the left and 10% from the top of the containing element.

Dimension Values (width, height)

The third and fourth values define the rectangle's width and height. These values must be non-negative and can also use any length-percentage unit.

A value of 100% width means the rectangle spans the full width of the reference box from its starting x position.

The Round Keyword

The optional round keyword enables rounded corners using syntax identical to the border-radius property:

• One value: Applies to all four corners
• Two values: Opposite corners (top-right/bottom-left and bottom-right/top-left)
• Three values: Top-right, bottom-right/left, and bottom-left
• Four values: Starting from top-right and going clockwise

The round keyword complements other CSS axis properties when creating complex scroll-driven animations and layout effects.

Complete Syntax Examples

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

/* Uniformly rounded corners */
clip-path: xywh(5% 5% 90% 90% round 12px);

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

/* Complex responsive values */
clip-path: xywh(2vw 2vh calc(100% - 4vw) calc(100% - 4vh) round 1rem);

Xywh() vs. Inset(): Choosing the Right Function

Both xywh() and inset() create rectangular basic shapes, but they approach the problem differently.

When to Use inset()

Use inset() when you're defining margins from each edge of the reference box. The inset() function takes up to four values representing distances from the top, right, bottom, and left edges respectively.

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

/* Different values for each edge: top right bottom left */
clip-path: inset(10px 20px 30px 40px);

When to Use xywh()

Use xywh() when you need explicit position and size control, particularly when the rectangle doesn't correlate directly with the element's edges.

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

/* Rectangle centered with percentage values */
clip-path: xywh(25% 25% 50% 50%);

Animation Considerations

When animating rectangular shapes, xywh() offers cleaner transition syntax because you only adjust the x and y coordinates to move the rectangle, rather than recalculating all four edge values required with inset(). This coordinate-based approach works particularly well with scroll-driven animations for creating engaging user experiences. Combined with scroll target groups, you can create sophisticated reveal effects that guide users through your content.

The xywh() function reached Baseline 2024 status, meaning it works reliably across all modern browsers. This coverage represents essentially 100% of users on modern browsers.

Chromium Browser Limitation

Chrome and Edge browsers currently support xywh() with clip-path and shape-outside, but only support xywh() with offset-path for animation paths.

Providing Fallbacks

For projects supporting older browsers, use the @supports rule to detect xywh() support and provide an inset() fallback:

.element {
 /* Fallback for older browsers */
 clip-path: inset(20px);
}

@supports (clip-path: xywh(0 0 100% 100%)) {
 .element {
 clip-path: xywh(10% 10% 80% 80%);
 }
}

For comprehensive browser compatibility strategies, our web development services include progressive enhancement approaches that ensure consistent experiences across all browsers.

Practical Applications

Image Masks with Consistent Padding

The xywh() function excels at creating consistent padding masks for images and thumbnails:

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

Card Corner Treatments

Create cards with specific corner rounding patterns:

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

Animated Reveal Effects

Enable smooth reveal animations:

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

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

Text Flow with shape-outside

Create rectangular areas around which text flows:

.floating-element {
 float: left;
 width: 200px;
 height: 200px;
 shape-outside: xywh(0 0 100% 100% round 20px);
}

These techniques integrate seamlessly with modern UI/UX design practices to create polished, professional interfaces. When combined with scroll marker groups, you can create immersive scroll experiences that guide users through your content.

Reference Box and Coordinate System

The xywh() function calculates positions relative to a reference box, which defaults to the margin box of the element. This means coordinates are measured from the outer edges of the element's margins.

You can specify different reference boxes using keywords:

• margin-box (default): Uses the outer margin edges
• border-box: Uses the border edge (includes border width)
• padding-box: Uses the padding edge (inside the border)
• content-box: Uses the content area only

/* Using border-box as reference */
clip-path: border-box xywh(10% 10% 80% 80%);

Understanding the reference box is crucial for predictable results, especially when elements have borders, padding, or margins. This coordinate system understanding is essential for implementing precise layouts in responsive web design.

Best Practices for Responsive Layouts

Use Percentages for Responsive Clipping

When creating responsive components, favor percentage values over fixed units:

/* Good: Responsive to container size */
.responsive-clip {
 clip-path: xywh(5% 5% 90% 90% round 8px);
}

/* Avoid for responsive components */
.inflexible-clip {
 clip-path: xywh(20px 20px calc(100% - 40px) calc(100% - 40px));
}

Combine with Viewport Units and Calc()

For hero sections and full-viewport elements:

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

Maintain Visual Consistency

When using xywh() across multiple components, establish consistent percentage values that create harmonious proportions. This approach aligns with design system principles and helps maintain a cohesive visual experience across your digital products. Pairing xywh() with other CSS features like CSS overscroll behavior ensures smooth, polished user experiences.

Conclusion

The CSS xywh() function provides a clean, intuitive syntax for defining rectangular shapes that scale naturally with responsive layouts. Its coordinate-plus-dimensions approach aligns with how designers conceptualize positions on a canvas, making the code more readable and maintainable than edge-based alternatives.

With full baseline support across modern browsers, xywh() is production-ready for creating clipped images, text flow shapes, and motion paths. The familiar border-radius syntax for rounded corners keeps your code consistent with existing CSS patterns.

For any project requiring rectangular basic shapes--whether static masks, responsive image treatments, or animated reveals--xywh() offers the most intuitive and maintainable solution in modern CSS. Pair this technique with other advanced CSS features like scroll markers and scroll target groups to create sophisticated, engaging interfaces.

Sources

1. CSS-Tricks: xywh()
2. OpenReplay Blog: Drawing Layout-Friendly Shapes with CSS xywh()
3. Can I Use: rect() and xywh()