CSS rect() Function

The rect() function allows you to define a rectangular shape in CSS.

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

If you're familiar with the inset() function, rect() might seem redundant at first glance, but they use entirely different coordinate systems. While inset() defines a rectangle by pushing inward from the element's edges, rect() defines a rectangle by measuring distances strictly from the top and left edges of the reference box.

Here is an example of using the rect() function to clip an image, complete with rounded corners and a hover transition:

.rect-box {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    
    /* 
      rect(top right bottom left round border-radius)
      top: 20px from top
      right: 280px from left
      bottom: 180px from top
      left: 20px from left
    */
    clip-path: rect(20px 280px 180px 20px round 15px);
    
    transition: clip-path 0.4s ease-in-out;
    cursor: pointer;
  }

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

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

View Output Full Screen Preview

How the Coordinates Work

The rect() function takes four values: top, right, bottom, and left.

top: The distance from the top edge of the element to the top edge of the rectangle.
right: The distance from the left edge of the element to the right edge of the rectangle.
bottom: The distance from the top edge of the element to the bottom edge of the rectangle.
left: The distance from the left edge of the element to the left edge of the rectangle.

The Legacy clip Property

Historically, a comma-separated version of the rect() function was used exclusively with the clip property (e.g., clip: rect(10px, 50px, 50px, 10px);).

The clip property has been deprecated in favor of clip-path. When using the clip-path property, you must use the modern space-separated syntax for rect(). The old comma-separated syntax will not work with clip-path.

Official Syntax

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

Possible Values

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

length-percentage or auto: Four space-separated values representing the top, right, bottom, and left coordinates of the rectangle. You can use any valid length (e.g., px, em) or percentage. The auto keyword resolves to the corresponding edge of the reference box.
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 rect() function is defined in CSS Shapes Module Level 2 (Editor's Draft)

Browser Support

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