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

You are here: Reference > JavaScript > client-side > style handling > properties > clip

clip style property

Browser support:

Specifies or returns 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:

If you want to clear the clip settings, use the Rect(auto auto auto auto) value in Internet Explorer and the auto value in other browsers.

Syntax:

object.clip;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: clip

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the clip property in JavaScript:

<head>
    <style>
        .example {
            position: absolute;
            top: 80px;
            left: 80px;
            clip: rect(10px 40px 40px 10px);
        }
    </style>

    <script type="text/javascript">
        function ChangeClip (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var image = document.getElementById ("myImage");
            image.style.clip = selectState;
        }
    </script>
</head>
<body>
    <img class="example" id="myImage" src="picture.gif">

    <!-- The red rectangle, only necessary for the example -->
    <div style="border:1px solid red; position:absolute;top:80px; left:80px; width:48px; height:48px;"></div>

    <select onchange="ChangeClip (this);" size="6" style="margin-top: 140px">
        <option selected="selected" />rect(10px 40px 40px 10px)
        <option />rect(auto auto auto auto)
        <option />rect(20px 40px 40px 10px)
        <option />rect(10px 20px 40px 10px)
        <option />rect(10px 40px 20px 10px)
        <option />rect(10px 40px 40px 20px)
    </select>
</body>