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

resize

The resize CSS property sets whether an element is resizable, and if so, in which directions.

resize does not apply to the following:

Syntax

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

The resize property is specified as a single keyword value from the list below.

Values

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

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

The element displays a mechanism for allowing the user to resize it in the horizontal direction.

The element displays a mechanism for allowing the user to resize it in the vertical direction.

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

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 definition

Formal syntax

none | both | horizontal | vertical | block | inline

Examples

Disabling resizability of textareas

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

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

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

Using resize with arbitrary elements

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

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

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

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors