resize

The resize property specifies whether a user can resize an element and in which direction. If resizing of the element is possible, a special icon resembling a triangle will appear in one of its corners, which the user can drag to resize the element in one or more directions.

It is often used for <textarea>, but it can be applied to any element except:

• inline elements;
• block elements for which the overflow property is set to visible (the default value for most elements).

By default, the <textarea> input field can be resized by dragging the bottom right corner. If you want to prevent the resizing of the text area, you must explicitly set the resize property to none.

• none — sizes cannot be changed (default value).
• both — sizes can be changed both horizontally and vertically.
• horizontal — size can be changed horizontally.
• vertical — size can be changed vertically.

Experimental values:

• block — size can be changed in the block dimension of the element.
• inline — size can be changed in the inline dimension of the element.

The block or inline dimension of the element depends on the text direction set by the writing-mode and direction properties.

By default, it is supported in Firefox and Safari. In Chrome and Edge browsers, you need to enable the Experimental Web Platform features flag. More detailed information can be found at caniuse.

When applying the resize property to images (<img> or <picture>), videos (<video>) or frames (<iframe>), it will not work. But you can wrap the image in a <div> or another wrapper and give it the ability to resize.

When the user resizes the element, the browser sets the values of the width and height properties as inline styles on the element. If the size of the element is changed in only one direction, only one of the properties will be set. It is important to know this, as there may be situations where the user cannot resize the element, for example, if any of the selectors has set the value of the width or height properties using !important.

💡 If you cannot change the size of the element after applying the resize property, check that the overflow property has one of the following values: scroll, auto, or hidden.

💡 You can limit the minimum and maximum width and height using the max-width, min-width, max-height, min-height properties.

💡 In WebKit browsers, the resize icon can be styled using the special pseudo class ::-webkit-resizer.