Propriedade resize

A propriedade resize permite ou impede o redimensionamento do elemento textarea ou de outros elementos (com outros elementos não funciona em todos os navegadores).

Sintaxe

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

Valores

Valor	Descrição
`both`	Permite redimensionar o elemento na largura e na altura.
`horizontal`	Permite redimensionar o elemento apenas na largura.
`vertical`	Permite redimensionar o elemento apenas na altura.
`none`	Não é possível redimensionar o elemento.

Valor padrão: none. Para textarea em alguns navegadores: both. Nos navegadores que não suportam resize, o textarea se comportará como se o valor none estivesse definido.

Exemplo . Valor both

O elemento é redimensionado em ambas as direções:

<textarea></textarea>

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

Exemplo . Valor horizontal

O elemento é redimensionado apenas horizontalmente:

<textarea></textarea>

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

Exemplo . Valor vertical

O elemento é redimensionado apenas verticalmente:

<textarea></textarea>

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

Exemplo . Valor none

O elemento não é redimensionado de forma alguma:

<textarea></textarea>

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

Exemplo . Limitação de largura e altura

É possível limitar a largura e altura mínima e máxima usando as propriedades max-width, min-width, max-height, min-height:

<textarea></textarea>

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