The resize
CSS property sets whether an element is resizable, and if so, in which directions.
The resize
CSS property sets whether an element is resizable, and if so, in which directions.
resize
does not apply to the following:
overflow
property is set to visible
/* 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.
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
and direction
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
and direction
value).
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 |
In many browsers, <textarea>
elements are resizable by default. You may override this behavior with the resize
property.
<textarea>Type some text here.</textarea>
textarea { resize: none; /* Disables resizability */ }
You can use the resize
property to make any element resizable. In the example below, a resizable <div>
contains a resizable paragraph (<p>
element).
<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>
.resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; }
Specification |
---|
CSS Basic User Interface Module Level 4 # resize |
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 | No | 15 | 4 | 37 | 18 | 14 | 3.2 | 1.0 | ||
flow_relative_support |
70 | 79 | 63 | No | 57 | 16 | No | 70 | 63 | No | 16 | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/resize