CSS xywh() Function

The xywh() function allows you to define a rectangular shape using its X and Y coordinates, along with its width and height.

It's a basic shape function that's primarily used with the clip-path property to crop an element, or with the offset-path property to animate an element along a rectangular path.

If you're familiar with drawing on an HTML canvas or working with SVG rectangles, the xywh() function will feel right at home. Unlike rect() or inset(), which define a shape by measuring distances from the edges of the element, xywh() takes a much more direct approach. You simply pick a starting point (the X and Y coordinates of the top-left corner) and specify how wide and tall the rectangle should be.

Here's an example of using the xywh() function to clip a box, complete with rounded corners and a hover transition:

.xywh-box {
    width: 300px;
    height: 200px;
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    
    /* 
      xywh(X Y Width Height round border-radius)
      X: 50px from the left
      Y: 25px from the top
      Width: 200px wide
      Height: 150px tall
    */
    clip-path: xywh(50px 25px 200px 150px round 20px);
    
    transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
  }

/* Expand the rectangle to reveal the full box on hover */
  .xywh-box:hover {
    clip-path: xywh(0px 0px 300px 200px round 0px);
  }
</style>

<div class="xywh-container">
  <div class="xywh-box">
    Hover Me!
  </div>
</div>

View Output Full Screen Preview

How the Coordinates Work

The xywh() function takes four mandatory values, followed by an optional rounding parameter:

X: The horizontal distance from the left edge of the reference box to the starting point of the rectangle.
Y: The vertical distance from the top edge of the reference box to the starting point of the rectangle.
Width: How wide the rectangle should be.
Height: How tall the rectangle should be.

Because it uses width and height rather than edge offsets, it's often much easier to animate or resize the shape without having to calculate the math for the opposite edges.

Official Syntax

The official syntax of the xywh() function is as follows:

Possible Values

As indicated in the official syntax, the xywh() function accepts the following values:

length-percentage: The first two values represent the X and Y coordinates. You can use any valid length (e.g., px, em) or percentage.
length-percentage-non-negative: The next two values represent the width and height. These must be non-negative values.
round <'border-radius'>: An optional parameter that allows you to round the corners of the rectangle. It uses the same syntax as the standard border-radius property (e.g., round 10px or round 10px 20px 30px 40px).

CSS Specifications

The xywh() function is defined in CSS Shapes Module Level 1 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.