The resize CSS property lets you control the resizability of an element.
Initialnone
Applies toelements with overflow other than visible
Inheritedno
Mediavisual
Computed Valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: none | both | horizontal | vertical
resize: none
resize: both
resize: horizontal
resize: vertical
resize: inherit
Values
none
The element offers no user-controllable method for resizing the element.
both
The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
horizontal
The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
vertical
The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
Note: resize does not apply to blocks for which the overflow property is set to visible.
Examples
Disabling resizability of textareas
By default, <textarea> elements are resizable in Gecko 2.0 (Firefox 4). You may override this behavior with the CSS shown below:
1
textarea.example {
2
resize: none; /* disables resizability */
3
}
Using resize with arbitrary elements
You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element):
