clip
Quick Summary for clip
clip
CSS property defines a visible portion of an element. The clip
property applies only to absolutely positioned elements — that is, elements with position:absolute
or position:fixed
.
Code Usage for clip
/* Keyword value */ clip: auto; /* <shape> values */ clip: rect(1px, 10em, 3rem, 2ch); /* Global values */ clip: inherit; clip: initial; clip: revert; clip: unset;
More Details for clip
clip
The clip
CSS property defines a visible portion of an element. The clip
property applies only to absolutely positioned elements — that is, elements with position:absolute
or position:fixed
.
/* Keyword value */ clip: auto; /* <shape> values */ clip: rect(1px, 10em, 3rem, 2ch); /* Global values */ clip: inherit; clip: initial; clip: revert; clip: unset;
Syntax
Note: Where possible, authors are encouraged to use the newer clip-path
property instead.
Values
<shape()>
A rectangular <shape()>
of the form rect(<top>, <right>, <bottom>, <left>)
. The <top>
and <bottom>
values are offsets from the inside top border edge of the box, while <right>
and <left>
are offsets from the inside left border edge of the box — that is, the extent of the padding box.
The <top>
, <right>
, <bottom>
, and <left>
values may be either a <length>
or auto
. If any side's value is auto
, the element is clipped to that side's inside border edge.
auto
The element does not clip (default). This is different from rect(auto, auto, auto, auto)
, which clips to the element's inside border edges.
Formal definition
Initial value | auto |
---|---|
Applies to | absolutely positioned elements |
Inherited | no |
Computed value | auto if specified as auto , otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise |
Animation type | a rectangle |
Formal syntax
<shape> | autowhere
<shape> = rect(<top>, <right>, <bottom>, <left>)
Examples
Clipping an image
CSS.dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0, 175px, 113px, 0); } #middle { left: 280px; clip: rect(119px, 255px, 229px, 80px); } #bottom-right { left: 200px; clip: rect(235px, 335px, 345px, 160px); }
HTML <p class="dotted-border"> <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"> <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"> <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"> <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"> </p>
ResultSpecifications
Specification |
---|
CSS Masking Module Level 1 # clip-property |
See also
This property is deprecated. Useclip-path
instead. Related CSS properties: text-overflow
, white-space
, overflow-x
, overflow-y
, overflow
, display
, position
Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語Polski中文 (简体)正體中文 (繁體) Change language