The resize
CSS property sets whether an element is resizable, and if so, in which directions.
/* 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.
none
both
horizontal
vertical
block
writing-mode
and direction
value).inline
writing-mode
and direction
value).Note: resize
does not apply to the following:
overflow
property is set to visible
none | both | horizontal | vertical | block | inline
In many browsers, <textarea>
elements are resizable by default. You may override this behavior with the resize
property.
textarea { resize: none; /* Disables resizability */ }
<textarea>Type some text here.</textarea>
You can use the resize
property to make any element resizable. In the example below, a resizable <div>
contains a resizable paragraph (<p>
element).
.resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; }
<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>
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. |
Initial value | none |
---|---|
Applies to | elements with overflow other than visible , and optionally replaced elements representing images or videos, and iframes |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | No | Yes
|
No | 12.1 | 3 |
Support on block level, replaced, table cell, or inline block elements | 4 | No | 5
|
No | 15 | 4 |
Support for flow-relative values block and inline
|
No | No | 63 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | No | ? | ? | ? | ? |
Support on block level, replaced, table cell, or inline block elements | ? | ? | No | ? | ? | ? | ? |
Support for flow-relative values block and inline
|
No | No | No | No | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/resize