Cascading Style Sheets/Clipping

Clip Property Top/Left Coordinates

The top and left parameters of the clip property remove any pixels with coordinates above or before the specified values, based on the top and left edges of the element.

Clip Property Bottom/Right Coordinates

• The bottom and right parameters remove any pixels located below or after the specified values, based on the top and left edges of the element.
• The values for bottom and right must be higher than the values of top and left in order to see any of the layer.

Clip Property Limitations

• The clipped element must be absolutely positioned for the clip property to work, so use a relatively positioned container around it.
• Specifying the height of the container keeps the next line from overlapping with the clipped areas.

Clip Property Usage

Use clip: rect(0, auto, auto, 0); as the default clip values to do proper trial and error

Use clip: rect(0, ###, auto, 0); to clip from left-to-right

Use clip: rect(0, auto, ###, 0); to clip from top-to-bottom