Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
clip
html
communitycreator

What is the CSS clip property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The clip property in CSSCascade Style Sheets defines some visible portion of an element. It clips the absolutely positioned element in the form of a rectangle.

In the future, the clip property is replaced by clip-path property.

Syntax


clip: auto|shape|initial|inherit;

Property values

  • auto: This is the default value. It is used when we don’t want to add any clipping.

  • shape: It sets the properties to clip any element. The only valid value which is allowed is rect (top, right, bottom, left)

  • initial: This sets the value to its default value.

  • inherit: This inherits property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language & CSS code to demonstrate the use of the clip property:

Explanation

In this example, we can see that we set the properties to clip the elements. We can also set the image in the background.

We can also change the properties and set them according to our choice.

RELATED TAGS

css
clip
html
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring