In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > clip

clip property

Browser support:

Specifies which part of a positioned element is visible.

A positioned element is an element whose position property is set to relative, absolute or fixed. This property only works for absolute or fixed positioned elements.

You can set the top, right, bottom, and left coordinates of the visible region with this property, relative to the upper-left corner of the element.

The value of top defines a line, content above this line will be hidden.
The value of bottom defines a line, content below this line will be hidden.
The value of left defines a line, content left of this line will be hidden.
The value of right defines a line, content right of this line will be hidden.

For example, if the value of top is 15px, the value of bottom is 25px, the value of left is 20px, and the value of right is 30px, than you can see the visible region in the following picture:

JavaScript page for this property: clip. You can find other example(s) there.

Possible values:

One of the following values:

auto

Default. The element does not clip.

inherit

Takes the value of this property from the computed style of the parent element.

rect(top right bottom left)

Clips the shape defined by the four coordinates (top right bottom left).

Default: auto.

Example HTML code 1:

This example illustrates the use of the clip property:

<head>
    <style>
        .notclipped {
            position: absolute;
            top: 260px;
            left: 260px;
            width: 100px;
            height: 100px;
            border: 2px solid black;
        }

        .clipped {
            position: absolute;
            top: 260px;
            left: 260px;
            width: 100px;
            height: 100px;
            background-color: red;
            clip: rect(20px 70px 60px 10px);
        }
    </style>
</head>
<body>
    The black border represents a rectangle with size width and height of 100px.
    <br />
    The red rectangle has size width and height of 100px too, 
    with 'clip: rect(20px 70px 60px 10px)'.
    <br />
    It means:
    <ul>
        <li>hide the area above the line 20px from top</li>
        <li>hide the area right form the line 70px from left</li>
        <li>hide the area below the line 60px from top</li>
        <li>hide the area left from the line 10px from left</li>
    </ul>
    <div class="notclipped"></div>
    <div class="clipped"></div>
</body>