resize

The resize CSS sets whether an element is resizable, and if so, in which direction(s).

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* Global values */
resize: inherit;
resize: initial;
resize: unset;

Initial valuenone
Applies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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 and direction 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 and direction value).

Note: resize does not apply to blocks for which the overflow property is set to visible.

Formal syntax

none | both | horizontal | vertical

Examples

Disabling resizability of textareas

In many browsers, <textarea> elements are resizable by default. You may override this behavior with the resize property.

CSS

textarea {
  resize: none; /* Disables resizability */
}

HTML

<textarea>Type some text here.</textarea>

Result

Using resize with arbitrary elements

You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element).

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}
div {
  height: 300px;
  width: 300px;
}
p {
  height: 200px;
  width: 200px;
}

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>

Result

Specifications

Specification Status Comment
CSS Logical Properties 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.
Candidate Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (on <textarea>) 1.0 4.0 (2.0)-moz No support 12.1 3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) 4.0 5.0 (5.0)[1] No support 15 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (on <textarea>) ? ? ? ? ?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) ? ? ? ? ?

[1] resize doesn't have any effect on <iframe> (cf. bug 680823)

See also

Document Tags and Contributors

 Last updated by: mfluehr,