Skip to content
Related Articles

Related Articles

Improve Article

CSS | clip Property

  • Difficulty Level : Expert
  • Last Updated : 08 Aug, 2019

The clip property specify at defining what portion of an absolutely positioned element you want to make visible. Except for the specified region, all are hidden.

Note: CSS clip property won’t work for “overflow: visible”.

Syntax:

clip: auto|shape|initial|inherit;

Property values:

  • auto: It is default value, there won’t be any clipping. The element is shown as it is.



    Syntax:

    clip: auto;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
             CSS | clip Property
        </title>
        <style>
            .shape {
                position: absolute;
                background: #0F9D58;
                width: 200px;
                height: 200px;
                color: #ffffff;
                text-align: center;
            }
              
            #clip_property {
                clip: auto;
            }
        </style>
    </head>
      
    <body>
      
        <p class="shape" id="clip_property">
            GeeksforGeeks
        </p>
      
    </body>
      
    </html>

    Output:

  • shape: shape clips the defined portion of the element. The rect(top, right, bottom, left ) is used to define visible portion.

    Syntax:

    clip: rect(top, right, bottom, left);

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
             CSS | clip Property
        </title>
        <style>
            .shape {
                position: absolute;
                background: #0F9D58;
                width: 200px;
                height: 200px;
                color: #ffffff;
                text-align: center;
            }
              
            #clip_property {
                clip: rect(0px, 120px, 100px, 0px);
            }
        </style>
    </head>
      
    <body>
      
        <p class="shape" id="clip_property">
            GeeksforGeeks
        </p>
      
    </body>
      
    </html>

    Output:

  • initial: initial sets the default value i.e. there won’t be any clipping as the default value is auto.

    Syntax:

    clip: initial;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
             CSS | clip Property
        </title>
        <style>
            .shape {
                position: absolute;
                background: #0F9D58;
                width: 200px;
                height: 200px;
                color: #ffffff;
                text-align: center;
            }
              
            #clip_property {
                clip: initial;
            }
        </style>
    </head>
      
    <body>
      
        <p class="shape" id="clip_property">
            GeeksforGeeks
        </p>
      
    </body>
      
    </html>

    Output:

  • inherit: inherit receives the property from the parent element. When it is used with the root element then the initial property will be used.

    Syntax:

    clip: inherit;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
             CSS | clip Property
        </title>
        <style>
            .shape {
                position: absolute;
                background: #0F9D58;
                width: 200px;
                height: 200px;
                color: #ffffff;
                text-align: center;
            }
              
            .shape1 {
                border: solid;
                border-color: black;
                position: absolute;
                background: #ffffff;
                width: 200px;
                height: 200px;
                color: #0F9D58;
                text-align: center;
            }
              
            #clip_property {
                clip: rect(0px, 120px, 100px, 0px);
            }
              
            #clip_property1 {
                clip: inherit;
            }
        </style>
    </head>
      
    <body>
      
        <div class="shape" id="clip_property">
            <p>
                GeeksforGeeks
            </p>
            <div class="shape1" id="clip_property1">
                <p>
                    GeeksGeeks
                </p>
            </div>
        </div>
        <!-- Here clip_property1 inherits the 
        clip property from clip_property -->
    </body>
      
    </html>

    Output:

Supported Browsers: The browsers supported by clip property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 8.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :