xywh() | CSS-Tricks

The CSS xywh() function allows you to create rectangles by setting the upper-left corner point and the width and height for use in the shape-outside, clip-path, and offset-path properties.
Note: Chromium-based browsers only support xywh() when used with the offset-path property.
As with the other functions that produce a basic shape — including ellipse(), circle(), inset(), polygon(), path(), and shape() — you won’t be drawing shapes directly on the screen in the way you’d normally think. You will either be creating a shape for text and elements to flow around (shape-outside), creating a cookie cutter to cut the shape out of another element (clip-path), or creating a shape that another element could move along (offset-path).
Clarification note: Neither path() nor shape() can be used with the shape-outside property like the other basic shape functions.
Before we get too deep, let’s discuss the reference box. This is the box upon which the basic shapes used in shape-outside and clip-path is formulated.
By default, the box defined by the outer edges of the margins is the reference box, so a shape must fit inside the reference box to have an effect. If the shape is larger than the reference box, then the outer edges of the element will remain intact, i.e. its unmodified rectangular form.
For the shape-outside property, this means the text and elements will flow around the element as if no shape-outside property was used. For clip-path, it similarly means that nothing will be clipped because the entire element fits within the cookie cutter. If you need to change the reference box, you’ll need to add the appropriate keyword (margin-box, padding-box, border-box, etc.) to clip-path or shape-outside.
The offset-path property is not limited by the reference box in the same way shape-outside and clip-path are limited by it. An offset-path whose shape is well outside the reference box will still allow an element to move along it, however, the reference box used can affect where and how the shape is “drawn.”
You might be wondering why we need something like xywh() for “drawing” shapes. Elements are already rectangular boxes by default, after all. But there are a few reasons to do this:
Let’s start with clip-path so that we can more easily see the size and edges of the rectangles we create.
Note: If you’re looking at this in a Chromium-based browser, then you won’t see the squircle. Chromium-based browsers only support xywh() with offset-path.
Next let’s use shape-outside to flow some text along some squircle sides.
Note: If you’re looking at this in a Chromium-based browser, then you won’t see the text flowing around a squircle. Chromium-based browsers only support xywh() with offset-path.
Finally let’s send our squircle around a squircle using offset-path:
The xywh() function can take as few as four or as many as nine parameters in four sections: upper-left point, width and height, separator, and corner radii.
The first section is the X and Y coordinate for the upper-left corner of the rectangle.
The second section following directly after the corner point is the width and height of the rectangle.
The keyword “round” separates the two sets of values and is required if rounded corners are used.
Similar to the border-radius property, you can set one, two, three or four values of your corner radii.
The inset() function creates a rectangle by setting a distance between the outer edge of the element and the rectangle you want to create. This is perfect for rectangles that are static and/or that will always directly correlate with the size of the element.
If, however, you want a box that can easily move around and keep its shape, it will get super annoying to recalculate the box location every time. That’s where the xywh() function shines. With it you set the upper-left corner (x and y) and then set the width and height (w and h). Need to move it? Just change the coordinates of the upper corner, no need to recalculate every side again.
While supported in all browsers, Chromium browsers only support using xywh() with offset-path at the time of writing.
The CSS xywh() function is defined in the CSS Shapes Module Level 1 specification, which became a Candidate Recommendation on June 12, 2025. That means it integrates changes from a previous Candidate Recommendation (Draft or Snapshot) to allow for review and for ease of reference to the integrated specification, but those changes have not undergone a formal review.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →