Propriedade Resize
Última atualização: 2026-09-13
resize Propriedade Resize
A propriedade resize controla se o usuário pode redimensionar um elemento arrastando e em quais direções. É comumente usada em elementos como <textarea>, permitindo que os usuários alterem o tamanho livremente conforme necessário, melhorando a usabilidade do formulário.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
resize: none | both | horizontal | vertical | block | inline;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | both | horizontal | vertical | block | inline | Palavra-chave | O comportamento de redimensionamento do usuário |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| resize | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： resize funciona apenas em conjunto com uma propriedade overflow (auto, scroll ou hidden); sem um valor de overflow, resize é ignorado.
Dica： horizontal permite redimensionar apenas a largura; vertical permite redimensionar apenas a altura; both permite redimensionar nas duas direções.
❓ Perguntas Frequentes
QA quais elementos a propriedade resize do CSS pode ser aplicada em uma página?
Atextarea a suporta por padrão. Outros elementos precisam atender a duas condições: um valor de overflow diferente de visible (auto, hidden ou scroll) e um tamanho definido ou inferível. Cumpridas essas condições, divs, sections e contêineres de imagem ganham uma alça de arrasto. Elementos inline não se aplicam por padrão.
QComo impedir que o usuário redimensione um elemento textarea em CSS?
ADefina resize: none para remover a alça de arrasto no canto inferior direito. Use resize: vertical para permitir apenas o redimensionamento vertical ou resize: horizontal para apenas horizontal. Quando o produto exige um layout fixo ou a altura do textarea é calculada por JavaScript, desabilitar o resize é um requisito comum.
QPor que o resize não funciona e por que é preciso definir overflow no elemento?
AA especificação exige que resize surta efeito apenas em elementos cujo overflow não é visible; caso contrário, a propriedade é ignorada — esta é a causa mais comum de falha. Além disso, o elemento precisa conseguir realmente alterar o tamanho ao arrastar: elementos com display: inline e elementos sem restrições de tamanho não funcionarão. Depure na ordem: overflow, depois tipo do elemento e, em seguida, se é um contêiner rolável.
Qresize pode limitar o tamanho mínimo e máximo de um elemento?
ASim. resize controla se ele pode ser redimensionado, enquanto min-width, max-width, min-height e max-height controlam o intervalo do redimensionamento, e ambos se combinam. Por exemplo, com resize: both; max-width: 400px; min-width: 200px; o elemento só pode ser arrastado entre 200px e 400px.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
