CSS rect() Function

CSS rect() Function

The CSS rect() function defines a rectangular clipping region using top, right, bottom, and left offsets.

It is used with the legacy clip property to control which portion of an absolutely positioned element remains visible. Both rect() and clip are deprecated, and modern CSS should use clip-path with inset() instead.

Syntax

rect(top, right, bottom, left)
rect(top right bottom left)

The function requires four values in the order top, right, bottom, and left.

For example:

clip: rect(10px, 150px, 100px, 20px);
clip: rect(10px 150px 100px 20px);
clip: rect(auto, 150px, 100px, auto);

Both comma-separated and space-separated forms are supported by the legacy syntax.

Each argument accepts a CSS length or the keyword auto.

The rect() function is not interchangeable with modern rectangular clipping functions such as inset().

It is specifically associated with the deprecated clip property.

Parameters

The rect() function accepts four required values.

For example:

clip: rect(20px, 180px, 120px, 30px);

This defines a rectangular region beginning 20px from the top and 30px from the left.

The right boundary is located 180px from the left edge, while the bottom boundary is located 120px from the top edge.

The resulting visible region is 150px wide and 100px high.

How It Works

The rect() function establishes four clipping boundaries relative to the element's border box.

Only content inside the rectangular region remains visible.

For example:

.clipped {
  position: absolute;
  width: 200px;
  height: 150px;
  clip: rect(20px, 180px, 120px, 30px);
}

The clipping region extends from 30px to 180px horizontally and from 20px to 120px vertically.

The content outside those boundaries is clipped from view.

Clipping does not resize the element or change its underlying layout dimensions.

The element remains 200px wide and 150px high even though only part of it is visible.

The clipping region is rectangular and cannot have rounded corners or arbitrary shapes.

Coordinate System

The rect() function uses coordinates measured from the element's top-left border edge.

The top and bottom arguments are vertical coordinates, while the left and right arguments are horizontal coordinates.

For example:

clip: rect(25px, 175px, 125px, 25px);

This creates the following boundaries:

The visible width is calculated by subtracting the left coordinate from the right coordinate.

175px - 25px = 150px

The visible height is calculated by subtracting the top coordinate from the bottom coordinate.

125px - 25px = 100px

Unlike inset(), the right and bottom values are coordinates rather than distances inward from the right and bottom edges.

Using auto Values

The auto keyword allows a clipping boundary to follow the corresponding edge of the element.

For example:

clip: rect(auto, auto, auto, auto);

This creates a clipping region corresponding to the element's full border box.

Individual boundaries can also use auto:

clip: rect(20px, auto, 120px, auto);

This clips the element vertically while retaining its full horizontal extent.

Another example:

clip: rect(auto, 150px, auto, 30px);

This clips the element horizontally while retaining its full vertical extent.

The auto keyword is useful when only one or two boundaries need to be restricted.

Using rect() with clip

The rect() function is used as a value of the legacy clip property.

For example:

.image {
  position: absolute;
  clip: rect(10px, 180px, 120px, 20px);
}

The clip property applies the rectangular clipping region to the positioned element.

The property also accepts auto:

.image {
  clip: auto;
}

This removes the clipping restriction defined by clip.

Because clip is deprecated, it should generally be retained only when maintaining older stylesheets.

For new designs, use clip-path instead.

Positioning Requirements

The legacy clip property applies to absolutely positioned elements, including elements using position: absolute or position: fixed.

For example:

.clipped {
  position: absolute;
  clip: rect(10px, 150px, 100px, 10px);
}

This can clip the element because it is absolutely positioned.

By comparison:

.clipped {
  position: relative;
  clip: rect(10px, 150px, 100px, 10px);
}

The clipping declaration does not apply to a relatively positioned element.

Modern clip-path does not have this same positioning restriction.

For example:

.clipped {
  position: relative;
  clip-path: inset(10px 20px 30px 10px);
}

This clips the element without requiring absolute positioning.

rect() vs. inset()

The modern inset() function provides rectangular clipping with a more flexible syntax.

For a 200px-wide and 150px-high element, these declarations create equivalent clipping regions:

Legacy CSS:

.box {
  position: absolute;
  width: 200px;
  height: 150px;
  clip: rect(20px, 180px, 120px, 30px);
}

Modern CSS:

.box {
  width: 200px;
  height: 150px;
  clip-path: inset(20px 20px 30px 30px);
}

Both display a region 150px wide and 100px high.

The values differ because rect() uses coordinates for the right and bottom boundaries, while inset() measures inward from each corresponding edge.

Use inset() with clip-path for new projects.

Example

This example demonstrates how the legacy rect() function clips a rectangular element.

HTML:

<div class="rect-demo">
  <div class="rect-demo-box">
    <span>Clipped Content</span>
  </div>
</div>

CSS:

.rect-demo {
  position: relative;
  height: 180px;
  background-color: #f1f3f5;
}
.rect-demo-box {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 150px;
  background: linear-gradient(135deg, #0066cc, #00a896);
  color: #ffffff;
  font-weight: bold;
  clip: rect(20px, 210px, 130px, 30px);
}

The clipping rectangle begins 20px from the top and 30px from the left of the element.

Its right boundary is 210px from the left edge, and its bottom boundary is 130px from the top edge.

The visible region is therefore 180px wide and 110px high.

The underlying element retains its original dimensions of 240px by 150px.

Modern Alternative

This example uses clip-path with inset() to create a similar rectangular clipping effect without absolute positioning.

HTML:

<div class="rect-modern-demo">
  <div class="rect-modern-box">
    <span>Modern Clipping</span>
  </div>
</div>

CSS:

.rect-modern-demo {
  padding: 15px;
  background-color: #f1f3f5;
}
.rect-modern-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  max-width: 100%;
  height: 150px;
  background: linear-gradient(135deg, #0066cc, #00a896);
  color: #ffffff;
  font-weight: bold;
  clip-path: inset(20px 30px 20px 30px round 12px);
}

The inset() function clips 20px from the top and bottom and 30px from the left and right.

The round 12px setting adds rounded corners to the clipping region.

Unlike the legacy rect() function, inset() works with clip-path on normally positioned elements.

Common Uses

The rect() function primarily appears in older CSS stylesheets and compatibility code.

For example:

.legacy-image {
  position: absolute;
  clip: rect(10px, 190px, 140px, 20px);
}

For modern implementations, replace the legacy clipping with clip-path and an appropriate basic shape.

Limitations

The rect() function has several important limitations.

• It is deprecated and should not be used for new CSS designs.
• It is associated with the deprecated clip property.
• The clip property applies only to absolutely positioned elements.
• The function requires exactly four values.
• Values must be CSS lengths or the keyword auto.
• Percentage values are not supported.
• It creates only rectangular clipping regions.
• Rounded corners are not supported.
• Clipping does not change the element's layout dimensions.
• Future browser support is not guaranteed because the feature is deprecated.

For example, this is valid:

clip: rect(10px, 150px, 100px, 20px);

The following is invalid because percentages are not accepted:

clip: rect(10%, 90%, 90%, 10%);

The following is invalid because only three arguments are supplied:

clip: rect(10px, 150px, 100px);

Use clip-path: inset() for modern rectangular clipping.

Browser Support

The CSS rect() function is a deprecated legacy feature that has historically been supported by major browsers through the clip property.

Although it remains available in many browsers for compatibility, it should not be used in new projects.

For example:

.box {
  position: absolute;
  clip: rect(10px, 150px, 100px, 20px);
}

Modern CSS should use:

.box {
  clip-path: inset(10px 20px 20px 20px);
}

The two declarations are equivalent only when the element's dimensions and clipping coordinates produce the same boundaries.

For current compatibility information, visit Can I Use? and search for CSS clip or CSS clip-path.

Specifications

The legacy rect() function is defined in CSS 2.2 - Visual Effects .

The modern replacement, clip-path, is defined in the CSS Masking Module Level 1 .

Related CSS features include clip, clip-path, inset(), and overflow.