resize
Whether the user can resize an element by dragging its corner.
Syntax
resize: vertical;Values
| Parameter | Type | Description |
|---|---|---|
| none | keyword | Cannot be resized. |
| both | keyword | Width and height (the default for `<textarea>`). |
| horizontal | vertical | keyword | Only in one direction. |
Examples
A textarea that grows only in height, and a resizable block:
<textarea style="resize: vertical; width: 220px;">Only the height can be changed</textarea>
<div style="resize: both; overflow: auto; width: 160px; height: 60px; border: 1px solid gray;">Drag the corner of this block</div>Notes
For elements other than <textarea>, resize works only with overflow other than visible. resize: vertical for text areas keeps the user from breaking the layout by making them too wide.
See also
- overflow — What to do with content that does not fit into the element.
- <textarea> — A multi-line text field.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.