The resize
CSS property sets whether an element is resizable, and if so, in which directions.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* Keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* Global values */ resize: inherit; resize: initial; resize: unset;
The resize
property is specified as a single keyword value from the list below.
Values
none
- The element offers no user-controllable method for resizing it.
both
- The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
horizontal
- The element displays a mechanism for allowing the user to resize it in the horizontal direction.
vertical
- The element displays a mechanism for allowing the user to resize it in the vertical direction.
block
- The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the
writing-mode
anddirection
value). inline
- The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the
writing-mode
anddirection
value).
resize
does not apply to the following:
- Inline elements
- Block elements for which the
overflow
property is set tovisible
Formal definition
Initial value | none |
---|---|
Applies to | elements with overflow other than visible , and optionally replaced elements representing images or videos, and iframes |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | both | horizontal | vertical | block | inline
Examples
Disabling resizability of textareas
In many browsers, <textarea>
elements are resizable by default. You may override this behavior with the resize
property.
HTML
<textarea>Type some text here.</textarea>
CSS
textarea { resize: none; /* Disables resizability */ }
Result
Using resize with arbitrary elements
You can use the resize
property to make any element resizable. In the example below, a resizable <div>
contains a resizable paragraph (<p>
element).
HTML
<div class="resizable"> <p class="resizable"> This paragraph is resizable in all directions, because the CSS `resize` property is set to `both` on this element. </p> </div>
CSS
.resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'resize' in that specification. |
Editor's Draft | Adds the values block and inline . |
CSS Basic User Interface Module Level 3 The definition of 'resize' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
resize | Chrome Full support 1 | Edge Full support 79 | Firefox Full support 4 | IE No support No | Opera Full support 12.1 | Safari Full support 3 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Support on block level, replaced, table cell, or inline block elements | Chrome Full support 4 | Edge Full support 79 | Firefox
Full support
5
| IE No support No | Opera Full support 15 | Safari Full support 4 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android
Full support
5
| Opera Android Full support 14 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
Support for flow-relative values block and inline | Chrome No support No | Edge No support No | Firefox Full support 63 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 63 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.