The resize property

The resize property prohibits or allows resizing a textarea or other elements (does not work with other elements in all browsers).

Syntax

selector {
	resize: both | horizontal | vertical | none;
}

Values

Value	Description
`both`	You can stretch an element in width and height.
`horizontal`	You can only stretch an element by width.
`vertical`	You can only stretch an element by height.
`none`	You cannot resize an element.

Default value: none. For textarea in some browsers: both. In browsers that do not support resize, textarea will behave as if it were set to none.

Example . The both value

The element stretches in both directions:

<textarea></textarea>

textarea {
	resize: both;
	width: 200px;
	height: 200px;
}

Example . The horizontal value

The element only stretches horizontally:

<textarea></textarea>

textarea {
	resize: horizontal;
	width: 200px;
	height: 200px;
}

Example . The vertical value

The element only stretches vertically:

<textarea></textarea>

textarea {
	resize: vertical;
	width: 200px;
	height: 200px;
}

Example . The none value

The element does not stretch at all:

<textarea></textarea>

textarea {
	resize: none;
	width: 200px;
	height: 200px;
}

Example . Width and height limit

You can limit the minimum and maximum width and height using the max-width, min-width, max-height, min-height properties:

<textarea></textarea>

textarea {
	resize: both;
	min-height: 100px;
	max-height: 300px;
	min-width: 100px;
	max-width: 300px;
}