CSS xywh() defines a rectangle using four values in this order: its x and y offsets from the reference box’s left and top edges, then its width and height. Add an optional round clause to round the corners. It can supply geometry to properties such as clip-path and offset-path, but browser support should be checked for the specific property you plan to use.
What does xywh() do?
xywh() is a CSS basic-shape function that describes a rectangle. Its first two arguments locate the rectangle relative to the reference box: x is measured from the left edge, and y from the top. The next two arguments set the rectangle’s width and height.
The function describes the shape; the CSS property using it determines what that shape does. For example, clip-path uses it to define a clipping region, while offset-path uses it as a path for motion.
What is the syntax of xywh()?
xywh(x y width height [round border-radius])The x and y offsets accept lengths or percentages. Width and height accept nonnegative length-percentage values, including zero. The optional round clause takes a value using border-radius syntax.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
In other words, provide x, y, width, and height in that order; add round and a radius value only if you want rounded corners. For the formal syntax and current compatibility details, see MDN’s xywh() reference.
How do you use xywh() with CSS properties?
Clip an element with clip-path
Use clip-path when you want to show only the portion of an element inside the rectangle. This example leaves a 5% inset on each side and rounds the clipping shape’s corners:
.card-image {
clip-path: xywh(5% 5% 90% 90% round 12px);
}Define a motion path with offset-path
Use offset-path when an element should move along a path. Here the path is a rounded rectangle spanning the reference box:
.moving-element {
offset-path: xywh(0 0 100% 100% round 10%);
}Shape a border with border-shape
MDN also lists border-shape as a property that can use xywh(). This is a separate use from clipping or motion: the property consumes the rectangle geometry for its own purpose. Check support for border-shape specifically before relying on it.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Is xywh() supported in browsers?
MDN’s compatibility summary says xywh() has been available across browsers since January 2024; the page was modified on July 16, 2026. That broad summary does not guarantee support for every browser version or every property that can consume the function. Review compatibility data for the exact property and browsers your project targets, especially before using border-shape.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
