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.

Formal syntax

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

<length-percentage> =
<length> |
<percentage>

<border-radius> =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
xywh()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

See also