MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Tradução em progresso.

A propriedade CSS resize deixa você controlar o redimensionamento de qualquer elemento.
/* valores chave */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* valores globais */
resize: inherit;
resize: initial;
resize: unset;

Initial valuenone
Aplica-se aelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

Valores

none
The element offers no user-controllable method for resizing the element.
both
The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
horizontal
The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
vertical
The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
block
Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
inline
Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
Note: resize does not apply to blocks for which the overflow property is set to visible.

Sintaxe formal

none | both | horizontal | vertical

Exemplos

Desabilitando redimensionamento em textareas

CSS

Por padrão, <textarea> são elemento redimensionáveis em Gecko 2.0 (Firefox 4). Você consegue sobrepor este comportamento com o CSS mostrado abaixo:

textarea.exemplo {
 resize: none; /* redimensionamento desabilitado */
}

HTML

<textarea class="exemplo">Type some text here.</textarea>

Resultado

Usando resize com elemento arbitrários

Você pode usar a propriedade resize para fazer qualquer elemento redimensionavel. Neste exemplo abaixo, um container redimensionavel <div> contém um paragrafo redimensionavel (<p> element):

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    Este paragrafo é redimensionado, por causa de propriedade CSS resize definida como 'both' neste elemento.
  </p>
</div>

Resultado

Especificação

Especificação Status Comentário
CSS Logical Properties Level 1
The definition of 'resize' in that specification.
Rascunho editorial Adiciona o valor block e inline.
CSS Basic User Interface Module Level 3
The definition of 'resize' in that specification.
Candidata a Recomendação Definição inicial

Compatibilidade de browser

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico (on <textarea>) 1.0 4.0 (2.0)-moz ? 12.1 3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) 4.0 5.0 (5.0)[1] ? 15 4.0
Recurso Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico (on <textarea>) ? ? ? ? ?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) ? ? ? ? ?

[1] resize não tem nenhum efeito em <iframe> (cf. bug 680823)

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: FLR, brunoaugustosilva
 Última atualização por: FLR,