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:
| none | The element can’t be resized. This is the default value. It is generally used to disable the default resizing behavior. |
| both | The element can be resized both horizontally and vertically. |
| horizontal | The element can only be resized horizontally. |
| vertical | The element can only be resized vertically. |
| initial | Sets the resize property to its default value(none). |
| inherit | Inherits the resize property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.resize = “both” |
