Свойство resize запрещает или разрешает изменение размеров textarea или других элементов (с другими элементами работает не во всех браузерах).

Синтаксис

селектор {
	resize: none | both | horizontal | vertical | inherit;
}

Значения

Значение Описание
both Можно растягивать элемент по ширине и высоте.
horizontal Можно растягивать элемент только по ширине.
vertical Можно растягивать элемент только по высоте.
none Изменять размеры элемента нельзя.
inherit Наследует значение родителя.

Значение по умолчанию: none. Для textarea в некоторых браузерах: both. В тех браузерах, где нет поддержки resize, textarea будет вести себя так, будто задано значение none.

Примеры

Пример . Значение both

Элемент растягивается в обе стороны:

<textarea></textarea>
textarea {
	resize: both;
	width: 200px;
	height: 200px;
}

Результат выполнения кода:

Пример . Значение horizontal

Элемент растягивается только по горизонтали:

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

Результат выполнения кода:

Пример . Значение vertical

Элемент растягивается только по вертикали:

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

Результат выполнения кода:

Пример . Значение none

Элемент не растягивается вообще:

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

Результат выполнения кода:

Пример . Ограничение ширины и высоты

Можно ограничить минимальную и максимальную ширину и высоту с помощью min-height, max-height, min-width, max-width:

textarea {
	resize: both;
	border: 1px solid red;
	min-height: 100px;
	max-height: 300px;
	min-width: 100px;
	max-width: 300px;
}

Результат выполнения кода: