clip - HTML CSS CSS Property

HTML CSS examples for CSS Property:clip

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. clip

Description

The clip CSS property sets the clipping region for an absolutely positioned element.

It does not work if the overflow property is set to visible.

The following table summarizes the clip Property.

Item Value
Default value: auto
Applies to:Absolutely positioned elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


clip:      shape | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
shape Clips an element. The only valid shape value is: rect(top, right, bottom, left).
autoThe element does not clip. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element clip property.

The example below shows the clip property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS clip property</title>
  <style type="text/css">
    img {<!--from w ww .  j  a  va 2  s . c  o m-->
        position: absolute;
        clip: rect(50px,250px,200px,0);
    }
</style>
 </head>
 <body>
  <p><img src="https://www.java2s.com/style/demo/Opera.png" width="500" height="300" alt="Sky"></p>
 </body>
</html>

Related Tutorials