CSS resize Property

CSS resize property allows us to control whether an element can be resized or not. It also controls in which direction the element can be resized.

The resize property does not apply to inline or inline-block elements. It only applies to the block-level elements not having overflow: visible;.

The elements can be resized by double clicking and dragging their bottom-right corner. See the example below:

Example:

div{
  overflow: auto;
  resize: both;
}

Use resize: horizontal; to allow user resize the element only horizontally.

Example:

div{
  overflow: auto;
  resize: horizontal;
}

Use resize: vertical; to allow user resize the element only vertically.

Example:

div{
  overflow: auto;
  resize: vertical;
}

CSS Syntax

The resize property has the following syntax:

resize: none|both|horizontal|vertical|initial|inherit;

Property Values

The resize property accepts the following values:

noneThe element can’t be resized. This is the default value. It is generally used to disable the default resizing behavior.
bothThe element can be resized both horizontally and vertically.
horizontalThe element can only be resized horizontally.
verticalThe element can only be resized vertically.
initialSets the resize property to its default value(none).
inheritInherits the resize property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.resize = “both”