Skip to main content

Resize | CSS

  • Resize | CSS

🧩 Propriedade resize no CSS​

A propriedade resize permite controlar se (e como) um elemento pode ser redimensionado pelo usuário — geralmente usada em elementos como <textarea> ou outros com overflow diferente de visible.

✅ resize: both​

O valor both significa que o elemento pode ser redimensionado tanto na horizontal quanto na vertical.

textarea {
  resize: both;
  overflow: auto;
}

📌 Importante: o resize só funciona se o elemento tiver um overflow definido como algo diferente de visible (por exemplo: auto, scroll ou hidden).

🔧 Outros valores possíveis:​

ValorDescrição
noneO elemento não pode ser redimensionado.
bothPode ser redimensionado na horizontal e vertical.
horizontalPode ser redimensionado somente na horizontal.
verticalPode ser redimensionado somente na vertical.
blockPode ser redimensionado ao longo do eixo de bloco (depende do modo de escrita).
inlinePode ser redimensionado ao longo do eixo de linha (modo inline).

💡 Exemplo prático:​

<div class="caixa">Redimensione-me!</div>
.caixa {
  width: 150px;
  height: 100px;
  border: 2px solid #555;
  overflow: auto;
  resize: both;
  padding: 10px;
}

➡️ Isso cria uma caixinha que o usuário pode redimensionar nas duas direções (horizontal e vertical), aparecendo um "pegador" no canto inferior direito.