Redimensionar - CSS-Tricks | CSS Almanac 2025

A resizepropriedade controla se e como um elemento pode ser redimensionado pelo usuário clicando e arrastando o canto inferior direito do elemento.

.module ( resize: both; )

É muito importante saber: resize não faz nada a menos que a overflowpropriedade seja definida como algo diferente de visible, que é seu valor inicial para a maioria dos elementos.

Também vale a pena saber que o Firefox permite que você redimensione um elemento menor do que seu tamanho original. Os navegadores Webkit não permitem redimensionar um elemento para torná-lo menor, apenas maior (em ambas as dimensões).

Valores

none: o elemento não é redimensionável. Este é o valor inicial para a maioria dos elementos. O textareaelemento é a exceção mais comum - em muitos navegadores seu resizevalor padrão é both.
both: o usuário pode redimensionar a altura e / ou largura do elemento.
horizontal: o usuário pode redimensionar o elemento horizontalmente (aumentando a largura).
vertical: o usuário pode redimensionar o elemento verticalmente (aumentando a altura).
inherit: o elemento herda o valor de redimensionamento de seu pai.

Quando um elemento é redimensionável, ele tem uma pequena alça de IU no canto inferior. O identificador aparece à direita nos elementos da página quando a página directioné definida como ltr(da esquerda para a direita) e à esquerda nas rtlpáginas (da direita para a esquerda).

Um elemento sem a alça (frente) e com a alça (atrás)

Demo

O elemento redimensionável nesta demonstração é um parágrafo. Clique nos botões para experimentar os diferentes resizevalores.

Veja a demonstração de redimensionamento da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Relacionado

overflow
direction

Mais Informações

The Spec
Mozilla Docs
Artigo de David Walsh
Truques Textarea

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.