CSS clip Property
Last Updated :
22 Oct, 2021
The clip property specifies defining what portion of an absolutely positioned element you want to make visible. Except for the specified region, the rest all other the regions are hidden. The clip property is only applicable to the absolutely positioned element ie., the element having the position: absolute or position: fixed.
Syntax:
clip: auto|shape|initial|inherit;
Note:
- CSS clip property won’t work for “overflow: visible“.
- The clip property is now deprecating which will be replaced by the clip-path property.
Property values: All the properties are described well with the example below.
auto: It is the default value, there won’t be any clipping. The element is shown as it is.
Syntax:
clip: auto;
Example: This example illustrates the use of the clip property whose value is set to auto that will not apply any clipping to the specified region.
HTML
<!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 the visible portion.
Syntax:
clip: rect(top, right, bottom, left);
Example: This example illustrates the use of the clip property whose value is set to the specific shape that clips the specified portion of an element.
HTML
<!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: This example illustrates the use of the clip property whose value is set to initial.
HTML
<!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: This example illustrates the use of the clip property whose value is set to the inherit.
HTML
<!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>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by clip property are listed below:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...