The resize
CSS property sets whether an element is resizable, and if so, in which directions.
resize
Try it
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: revert; resize: revert-layer; 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
Experimental -
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
Experimental -
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
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 |
---|
CSS Basic User Interface Module Level 4 # resize |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
resize |
1
|
79
|
4
|
No
|
12.1
|
3
|
37
|
18
|
4
|
14
|
1
|
1.0
|
block_level_support |
4
|
79
|
5
|
No
|
15
|
4
|
37
|
18
|
5
|
14
|
3.2
|
1.0
|
flow_relative_support |
No
|
No
|
63
|
No
|
No
|
No
|
No
|
No
|
63
|
No
|
No
|
No
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/resize