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;
  

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).

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

Browser compatibility

See also

• <textarea>