Resize Property
Last updated: 2026-09-13
resize Resize Property
The resize property controls whether the user can resize an element by dragging, and in which directions. It is commonly used on elements like <textarea> so users can freely change the size as needed, improving form usability.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
resize: none | both | horizontal | vertical | block | inline;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | both | horizontal | vertical | block | inline | Keyword | The user's resizing behavior |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| resize | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： resize only works together with an overflow property (auto, scroll, or hidden); without an overflow value, resize is ignored.
Tip： horizontal allows resizing width only; vertical allows resizing height only; both allows resizing in both directions.
❓ FAQ
QWhich elements can the CSS resize property be applied to in a page?
Atextarea supports it by default. Other elements must meet two conditions: an overflow value other than visible (auto, hidden, or scroll), and a definite or inferable size. With those satisfied, divs, sections, and image containers all get a drag handle. Inline elements do not apply by default.
QHow do I prevent the user from resizing a textarea element in CSS?
ASet resize: none to remove the drag handle at the bottom-right corner. Use resize: vertical to allow resizing only vertically, or resize: horizontal for only horizontally. When the product requires a fixed layout, or the textarea height is computed by JavaScript, disabling resize is a common requirement.
QWhy is resize not working and why must overflow be set on the element?
AThe specification requires resize to take effect only on elements whose overflow is not visible; otherwise the property is ignored — this is the most common failure. Also, the element must be able to actually change size when dragged: display: inline elements and elements without size constraints will not work. Debug in order: overflow, then element type, then whether it is a scrollable container.
QCan resize limit the minimum and maximum size of an element?
AYes. resize controls whether it can be resized, while min-width, max-width, min-height, and max-height control the range of the resize, and the two stack together. For example, with resize: both; max-width: 400px; min-width: 200px; the element can only be dragged between 200px and 400px.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
