resize

Summary

The resize CSS property lets you control the resizability of an element.

Syntax

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

Values

none

The element offers no user-controllable method for resizing the element.

both

The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.

horizontal

The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.

vertical

The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.

block

Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.

inline

Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.

Formal syntax

none | both | horizontal | vertical

Examples

Disabling resizability of textareas

CSS

By default, <textarea> elements are resizable in Gecko 2.0 (Firefox 4). You may override this behavior with the CSS shown below:

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">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, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

Specifications

Browser compatibility

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

See also

• <textarea>