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.
resize
does not apply to the following:
- Inline elements
- Block elements for which the
overflow
property is set tovisible
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).
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 Basic User Interface Module Level 3The 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.
Update compatibility data on GitHub
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 Full support 5 Notes' |
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 Full support 5 Notes' |
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.
See also
resize by Mozilla Contributors is licensed under CC-BY-SA 2.5.