Definition
The resize CSS property is used to control whether an element can be resized by the user. It allows you to specify whether and in which directions the user can adjust the size of an element, typically used for elements like <textarea> or <input type="textarea">.
The resize property accepts the following values:
-
none: The element cannot be resized by the user. -
both: The element can be resized horizontally and vertically. -
horizontal: The element can be resized only horizontally. -
vertical: The element can be resized only vertically. -
auto: The default value. The browser determines whether the element can be resized based on its content and other factors.
Here’s an example:
textarea {
resize: both;
}
In this example, the textarea element is styled with the resize property set to both, allowing the user to resize the textarea both horizontally and vertically.
It’s important to note that the resize property has limited browser support and may not work consistently across all browsers. Additionally, some browsers may provide their own default styling for the resizable elements, which may override the resize property.
The resize property can be useful for enhancing user experience and allowing users to adjust the size of elements like textareas, making it more comfortable to view and interact with content.