Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the resize property in CSS?

Programming Bytes

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.

With the CSS resize property, we can resize an element horizontally, vertically, or in both directions.

We can set four different values to resize the property:

  • none — Element cannot be resized. This is the default value for most of the elements (except some elements like text area).
  • horizontal — Element can be resized in the horizontal directioni.e., we can resize the width of the element.
  • vertical — Element can be resized in the vertical directioni.e., we can resize the height of the element.
  • both — Element can be resized in the horizontal and vertical direction.

Syntax

.class-name {
    resize : both | horizontal | vertical | none ;
}

Code

Let’s create four p elements, and set height to 100px and width to 200px. Then, apply four resize properties to four p and test how it works.

Upon adding a resize property other than none, we will see a resizable spot at the bottom-right of the element. Hold this spot to resize the element.

We can not resize inline elements or elements that have the overflow property set as visible.

RELATED TAGS

css
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