Little Web Hut

CSS 2.1 Reference: clip Property

CSS clip Property
Syntax
selector {clip: rect(top, right, bottom, left);}
  • top, right, bottom, and left are each specified by using a length or the keyword auto.
(OR)
selector {clip: value;}
  • value is specified by using one of the following keywords: auto or inherit.
Usage

The clip property is used to specify a visible region of an absolutely positioned element. Everything outside of the specified region is hidden. The rect(top, right, bottom, left) function is used to specify the visible area as follows:

  • top - offset from the top border of the element's box using a length value or the keyword auto.
  • right - offset from the left border of the element's box using a length value or the keyword auto.
  • bottom - offset from the top border of the element's box using a length value or the keyword auto.
  • left - offset from the left border of the element's box using a length value or the keyword auto.

Note: Using the keyword auto specifies that no clipping will occur for the corresponding side.


CSS Example: The clip property is set to clip an image.
  #tst1 {clip: rect(3px, auto, 70px, 5px);
         position: absolute;
  }
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • auto - no clipping will occur.
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.
Applies To Elements that have a position property value of absolute.
Inherited No
Initial Value auto


clip Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe clip property is set to clip an image.