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 the user to resize the element only horizontally.

Example:

div{
  overflow: auto;
  resize: horizontal;
}

Use resize: vertical; to allow the user to 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:

General Info