xywh()
======

The **`xywh()`** CSS function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the `<basic-shape>` data type. You can use the `xywh()` function in CSS properties such as `offset-path` to create the rectangular path along which an element moves and in `clip-path` to define the shape of the clipping region.

Syntax
------


```css
offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);
```

### Values

`<length-percentage>`

Specifies the `<length-percentage>` values for the `x` and `y` coordinates of the rectangle.

`<length-percentage [0,∞]>`

Specifies non-negative `<length-percentage>` values for the width and height of the rectangle. The minimum value can be zero, and the maximum value has no limit.

`round <'border-radius'>`

Specifies the radius of the rounded corners of the rectangle using the same syntax as the CSS `border-radius` shorthand property. This parameter is optional.

Examples
--------

### Creating offset-path using xywh()

In the example below, the `offset-path` property uses the `xywh()` function to define the shape of the path on which the element, a magenta box in this case, moves. Two different scenarios are shown, each with different values for the `xywh()` function. The arrow inside the boxes points to the right edge of the box.


```html
<div class="container">
  Rectangular path 1
  <div class="path xywh-path-1">→</div>
</div>
<div class="container">
  Rectangular path 2
  <div class="path xywh-path-2">→</div>
</div>
```



```css
.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 30px;
  text-align: center;
}

.path {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: magenta;
  animation: move 10s linear infinite;
}

.xywh-path-1 {
  offset-path: xywh(20px 20px 100% 100% round 10%);
}

.xywh-path-2 {
  offset-path: xywh(20px 30% 150% 200%);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```


#### Result

* The path 1 rectangle is offset by `20px` from the left and top edges of the containing block. This path rectangle has the same dimension as the containing block, that is, the width is `100%` of the width of the containing block, and the height is `100%` of the height of the containing block. Notice how the arrow inside the box follows the `10%` curve (defined by `round 10%`) at the rectangular path corners.
* As the upper limit of both width and height in `xywh()` is infinity, setting the height to `200%` in the path 2 rectangle makes the generated rectangle twice as tall as the containing block. Notice how the arrow inside the box behaves at the corners when no `round <'border-radius'>` is specified.
Specifications
--------------

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-xywh |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `inset()` function
* `rect()` function
* `clip-path` property
* `offset-path` property
* `<basic-shape>` data type
* CSS shapes module
* Guide to basic shapes