What is the resize property in CSS?

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.