MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

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

  • inline element
  • 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 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.
Proposed Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 ?4 -moz- No12.13
Support on block level, replaced, table cell, or inline block elements4 ?51 ?154
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?
Support on block level, replaced, table cell, or inline block elements ? ? ? ? ? ? ?

1. resize doesn't have any effect on <iframe>. See bug 680823)

See also

Document Tags and Contributors

 Last updated by: SphinxKnight,