CSS xywh() Function

CSS xywh() Function

The CSS xywh() function defines a rectangular shape using its horizontal position, vertical position, width, and height.

It is a basic shape function commonly used with the clip-path property to control which portion of an element remains visible. The function also supports optional rounded corners using the round keyword.

Syntax

xywh(<x> <y> <width> <height>)
xywh(<x> <y> <width> <height> round <border-radius>)

The function requires four values: the horizontal position, vertical position, width, and height of the rectangle.

The optional round keyword introduces one or more corner-radius values.

Examples:

clip-path: xywh(20px 20px 150px 100px);
clip-path: xywh(10% 10% 80% 80%);
clip-path: xywh(0 0 100% 100%);
clip-path: xywh(25px 25px 200px 120px round 15px);
clip-path: xywh(10% 10% 80% 80% round 20px);
clip-path: xywh(0 0 100% 100% round 10px 20px);

Values are separated by spaces, not commas.

The first two values establish the rectangle's position. The next two values determine its dimensions.

Unlike inset(), which specifies distances from the edges of a reference box, xywh() specifies a starting position and dimensions.

Parameters

The xywh() function accepts four required values and an optional corner-radius definition.

For example:

clip-path: xywh(30px 20px 180px 100px round 12px);

This defines a rectangle positioned 30px from the left and 20px from the top of its reference box.

The rectangle is 180px wide and 100px high, with a 12px corner radius.

Lengths and percentages can be combined in the same function.

How It Works

The xywh() function creates a rectangle relative to a reference box.

When used with clip-path, the browser displays the portion of the element inside the rectangle and clips content outside it.

For example:

.box {
  width: 250px;
  height: 180px;
  background-color: #3498db;
  clip-path: xywh(25px 20px 180px 120px);
}

The clipping rectangle begins 25px from the left and 20px from the top of the reference box.

Only the rectangular region measuring 180px by 120px remains visible.

The element's original layout dimensions do not change.

Clipping affects what is painted, rather than changing the element's position or the space it occupies in the document.

For this reason, surrounding elements continue to use the original layout dimensions.

Position Values

The first two arguments specify the rectangle's starting position.

Horizontal Position

clip-path: xywh(40px 0 150px 100px);

The rectangle begins 40px from the left edge of the reference box.

Vertical Position

clip-path: xywh(0 30px 150px 100px);

The rectangle begins 30px from the top edge.

Combined Position

clip-path: xywh(40px 30px 150px 100px);

The rectangle begins 40px from the left and 30px from the top.

Negative Position Values

clip-path: xywh(-20px -10px 180px 120px);

Negative position values are permitted.

They position the clipping rectangle partly outside the reference box.

However, negative values for the width or height are not permitted.

Position values use physical horizontal and vertical directions rather than logical writing-mode directions.

Width and Height

The third and fourth arguments specify the rectangle's width and height.

For example:

clip-path: xywh(20px 20px 200px 100px);

The rectangle is 200px wide and 100px high.

Fixed Dimensions

clip-path: xywh(10px 10px 160px 90px);

Fixed lengths create a rectangle with dimensions that do not automatically scale with the element.

Percentage Dimensions

clip-path: xywh(10% 10% 80% 80%);

The rectangle uses dimensions relative to the reference box.

Mixed Dimensions

clip-path: xywh(20px 10% 75% 120px);

Length and percentage values can be combined.

Zero Dimensions

clip-path: xywh(50% 50% 0 0);

A rectangle with zero width and height has no visible area.

This can be useful as an endpoint in a clipping animation.

Negative width and height values are invalid.

Rounded Corners

The optional round keyword adds rounded corners to the clipping rectangle.

For example:

clip-path: xywh(10% 10% 80% 80% round 20px);

All four corners use a 20px radius.

One Radius

clip-path: xywh(0 0 100% 100% round 15px);

Applies the same radius to every corner.

Two Radii

clip-path: xywh(0 0 100% 100% round 10px 25px);

The first value applies to the top-left and bottom-right corners. The second applies to the top-right and bottom-left corners.

Four Radii

clip-path: xywh(0 0 100% 100% round 10px 20px 30px 40px);

The values apply to the top-left, top-right, bottom-right, and bottom-left corners, respectively.

Elliptical Corners

clip-path: xywh(0 0 100% 100% round 20px / 10px);

The slash separates the horizontal and vertical corner radii.

The round syntax follows the same general corner-radius rules as the CSS border-radius property.

Rounded corners affect the clipping region without adding a visible border.

Percentage Values

Percentage values make the clipping rectangle relative to the reference box.

For example:

.box {
  clip-path: xywh(10% 10% 80% 80%);
}

The rectangle begins 10% from the left and 10% from the top.

Its width and height are each 80% of the corresponding reference box dimension.

For a 300px by 200px reference box, the values resolve to:

Percentages for horizontal position and width use the reference box's width.

Percentages for vertical position and height use its height.

Percentage-based rectangles are useful when clipping regions need to adapt to different element sizes.

Reference Box

The xywh() function calculates its coordinates and dimensions relative to a reference box.

When used with clip-path, the default reference box for an ordinary HTML element is its border box.

For example:

.box {
  clip-path: xywh(10% 10% 80% 80%);
}

The percentages are calculated relative to the element's border box.

A different geometry box can be specified:

.box {
  clip-path: xywh(10% 10% 80% 80%) content-box;
}

In this case, the rectangle is calculated relative to the content box.

Other geometry box keywords include padding-box and border-box.

SVG elements can also use SVG-specific reference boxes, depending on the property and element.

The reference box determines how percentages and coordinate offsets are interpreted.

xywh() vs. inset()

Both xywh() and inset() can create rectangular clipping regions.

The difference is how the rectangle is described.

Using xywh()

clip-path: xywh(10% 10% 80% 80%);

The rectangle starts at 10% from the left and top, with a width and height of 80%.

Using inset()

clip-path: inset(10%);

The rectangle is inset by 10% from each edge.

For this example, both functions create equivalent clipping regions.

Use xywh() when explicit dimensions are convenient, and inset() when edge offsets are easier to describe.

Example

The following example uses xywh() to display only the central portion of a colored element.

HTML:

<div class="xywh-demo">
  <div class="xywh-box">Clipped Rectangle</div>
</div>

CSS:

.xywh-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.xywh-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  height: 180px;
  color: #fff;
  background-color: #3498db;
  clip-path: xywh(10% 10% 80% 80%);
}

The clipping rectangle starts 10% from the left and top of the element.

Its width and height are 80% of the reference box.

The remaining outer portion is clipped, but the element retains its original layout dimensions.

Rounded Rectangle Example

The following example adds rounded corners to a rectangular clipping region.

HTML:

<div class="xywh-rounded-demo">
  <div class="xywh-rounded-box">Rounded Clipping</div>
</div>

CSS:

.xywh-rounded-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.xywh-rounded-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  height: 180px;
  color: #fff;
  background-color: #16a085;
  clip-path: xywh(10% 10% 80% 80% round 20px);
}

The round 20px portion adds rounded corners to the clipping region.

The rounded corners apply to the rectangle defined by xywh(), not to the element's original border box.

This is useful for creating cropped images, decorative panels, and other rectangular shapes with rounded edges.

Animation Example

The following example uses a transition to reveal an element by changing the clipping rectangle.

HTML:

<div class="xywh-animation-demo">
  <div class="xywh-animation-box">Hover to Reveal</div>
</div>

CSS:

.xywh-animation-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.xywh-animation-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  height: 180px;
  color: #fff;
  background-color: #8e44ad;
  clip-path: xywh(40% 40% 20% 20% round 15px);
  transition: clip-path 0.5s ease;
}
.xywh-animation-box:hover {
  clip-path: xywh(0 0 100% 100% round 15px);
}
@media (prefers-reduced-motion: reduce) {
  .xywh-animation-box {
    transition: none;
  }
}

Move the pointer over the visible portion of the purple box.

The clipping rectangle expands from a small central region to the full element.

When the pointer leaves, the rectangle returns to its original dimensions.

The reduced-motion media query removes the transition for users who prefer less motion.

For interactive content, provide keyboard-accessible controls rather than relying on hover alone.

Common Uses

The xywh() function is useful for rectangular clipping regions that require explicit positions and dimensions.

• Image cropping: Display a selected rectangular portion of an image.
• Content reveals: Animate a clipping region to reveal or conceal content.
• Rounded panels: Create rectangular clipping regions with rounded corners.
• Decorative effects: Display selected portions of backgrounds or graphic elements.
• Responsive shapes: Use percentages to adapt clipping regions to element dimensions.
• Hover effects: Expand or reposition a clipping rectangle during interaction.
• Transitions: Animate compatible rectangular shapes using clip-path.

For example:

.image-frame {
  clip-path: xywh(5% 5% 90% 90% round 12px);
}

This creates a rectangular clipping region with a 5% inset on each side and rounded corners.

Unlike border-radius, the clipping rectangle can be positioned and sized independently of the element's outer edges.

Limitations

The xywh() function has several requirements and behaviors to consider.

• Four values are required: horizontal position, vertical position, width, and height.
• Values are separated by spaces rather than commas.
• Negative position values are permitted, but negative width and height values are invalid.
• The function defines a basic shape and must be used with a property that accepts that shape.
• When used with clip-path, it changes the visible region without changing the element's layout dimensions.
• Percentage values are calculated relative to the selected reference box.
• The round keyword is required before optional corner-radius values.
• Clipped content is not painted outside the clipping region, but it can still exist in the document structure.
• Browser support for xywh() can differ from support for older basic shape functions.
• Transitions between clipping shapes require compatible interpolation.

Valid Examples

clip-path: xywh(0 0 100% 100%);
clip-path: xywh(10px 20px 150px 100px);
clip-path: xywh(-10px -10px 200px 150px);
clip-path: xywh(10% 10% 80% 80%);
clip-path: xywh(10% 10% 80% 80% round 15px);
clip-path: xywh(0 0 100% 100% round 10px 20px);

Invalid Examples

clip-path: xywh(10px 20px 100px);
clip-path: xywh(10px, 20px, 100px, 80px);
clip-path: xywh(10px 20px -100px 80px);
clip-path: xywh(10px 20px 100px 80px 15px);

The first example is missing the height.

The second example incorrectly uses commas.

The third example specifies a negative width.

The fourth example omits the round keyword before the corner radius.

Clipping and Accessibility

Clipping can hide content visually without removing it from the document's accessibility tree.

Avoid clipping essential instructions or interactive controls unless the interface provides an accessible way to reveal them.

When using animated clipping regions, respect reduced-motion preferences and ensure that important information remains available without animation.

Browser Support

The CSS xywh() function is Baseline Newly available in modern browsers, with support introduced more recently than older clipping functions such as inset().

Current versions of major browsers support rectangular basic shapes using xywh(), although older versions may not recognize the function.

For current compatibility information, visit Can I Use? and search for CSS xywh().

When supporting older browsers, consider using inset() as a fallback for equivalent rectangular clipping regions.

For example:

.box {
  clip-path: inset(10%);
  clip-path: xywh(10% 10% 80% 80%);
}

Browsers that do not support xywh() can continue using the earlier inset() declaration.

Specifications

The xywh() function is defined in the CSS Shapes Module Level 1 specification.

The specification defines the function's coordinate values, dimensions, optional rounded corners, and relationship to other CSS basic shapes.

Related features include inset(), rect(), polygon(), clip-path, and CSS shape reference boxes.