xywh()

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.

.element {
  clip-path: xywh(60px 4em 50% 10vw round 10px 30px);
}

Note: Chromium-based browsers only support xywh() when used with the offset-path property.

“Drawing” shapes

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.

Reference box

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.”

Why we need this

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:

• Greater control: While you could also just resize the element, using a rectangular function allows you to fine tune the rectangle that’s shown and you can specifically make it smaller than the size of the element. For instance, have text flow over a portion of an element or precisely place the rectangle within the confines of the element.
• Animation performance: If you need to animate that square in some way, animating the clip-path won’t trigger a layout shift because it’s all happening within the element.
• Rounded corners: The majestic squircle can be yours using this function. While you can do rounded corners on the element itself you can’t have text flow into the space between the corner and the rounded part, unless you use a rectangular function with shape-outside.

Basic usage

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.

<div class="XYloWHone"></div>

.XYloWHone{
  width: 300px;
  height: 300px;
  background-color: coral;
  clip-path: xywh(60px 4em 50% 10vw round 10px 30px);
}

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.

<p>
  **some text**
  <span class="XYloWHone"></span>
  **more text**
</p>

.XYloWHone {
  width: 300px;
  height: 300px;
  background-color: lightcoral;
  float:left;
  shape-outside: xywh(60px 4em 50% 10vw round 10px 80px 50px);
}

Finally let’s send our squircle around a squircle using offset-path:

<div class="XYloWHone"></div>

.XYloWHone {
  width: 300px;
  height: 300px;
  background-color: lightcoral;
  /* Cuts the rectangle out of the element */
  clip-path: xywh(2em 2em 100px 75px round 20px);
  /* Defines the animated path */
  offset-path: xywh(2em 2em 100px 75px round 20px);
  offset-distance: 0;
  /* Applies the animation */
  animation: squircle-offset 5s linear infinite;
}

/* Defines the animation */
@keyframes squircle-offset {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}

body {
  margin: 150px;
}

Syntax

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.

<xywh()> = xywh(
  <length-percentage>{2} <length-percentage [0,∞]>{2}
  [ round <'border-radius'> ]?
)

Upper-left point

The first section is the X and Y coordinate for the upper-left corner of the rectangle.

Width and height

The second section following directly after the corner point is the width and height of the rectangle.

The round keyword

The keyword “round” separates the two sets of values and is required if rounded corners are used.

Corner radii

Similar to the border-radius property, you can set one, two, three or four values of your corner radii.

• With one value, all corners will have same rounding.
• With two values, the first will affect the upper right and lower left while the second will affect the lower right and upper left.
• With three values, the first value applies to the upper right, the second value to the lower-right and upper-left and the third value to the lower-left.
• With four values, each value will affect a particular corner starting at the upper right and going clockwise through to the upper left.

xywh() vs. inset()

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.

Browser support

While supported in all browsers, Chromium browsers only support using xywh() with offset-path at the time of writing.

Specification

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.

Related