resize

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS resize définit si un élément est redimensionnable, et si oui, dans quelles directions.

Exemple interactif

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Essayez de redimensionner cet élément.</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

resize ne s'applique pas aux éléments suivants :

Éléments en ligne
Éléments de bloc pour lesquels la propriété overflow est définie sur visible ou clip

Syntaxe

css

/* Valeurs avec un mot-clé */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Valeurs globales */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

La propriété resize peut être définie avec l'un des mots-clés suivants.

Valeurs

none: L'élément n'offre aucune méthode à l'utilisateur·ice pour que celui-ci le redimensionne.
both: L'élément affiche un mécanisme afin que l'utilisateur·ice puisse le redimensionner, horizontalement et verticalement.
horizontal: L'élément affiche un mécanisme afin que l'utilisateur·ice puisse le redimensionner dans la direction horizontale.
vertical: L'élément affiche un mécanisme afin que l'utilisateur·ice puisse le redimensionner dans la direction verticale.
block: L'élément affiche un mécanisme afin que l'utilisateur·ice puisse le redimensionner dans la direction bloc (soit horizontalement, soit verticalement, en fonction de la valeur de writing-mode et de direction).
inline: L'élément affiche un mécanisme afin que l'utilisateur·ice puisse le redimensionner dans la direction en ligne (soit horizontalement, soit verticalement, en fonction de la valeur de writing-mode et de direction).

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments dont `overflow` ne vaut pas `visible` et éventuellement les éléments remplacés qui représentent des images, des vidéos ou des iframes
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

Exemples

Désactiver le redimensionnement des éléments `textarea`

Dans de nombreux navigateurs, les éléments HTML <textarea> peuvent être redimensionnés par défaut. Vous pouvez remplacer ce comportement avec la propriété resize.

HTML

html

<textarea>Saisir du texte ici.</textarea>

CSS

css

textarea {
  resize: none; /* Désactive le redimensionnement */
}

Résultat

Utiliser `resize` sur des éléments quelconques

Vous pouvez utiliser la propriété resize pour rendre n'importe quel élément redimensionnable. Dans l'exemple ci-dessous, un <div> redimensionnable contient un paragraphe redimensionnable (élément HTML <p>).

HTML

html

<div class="redimensionnable">
  <p class="redimensionnable">
    Ce paragraphe peut être redimensionné car la propriété CSS `resize` vaut
    `both` sur cet élément.
  </p>
</div>

CSS

css

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

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

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

Résultat

Spécifications

Spécification
CSS Basic User Interface Module Level 4 # resize

Compatibilité des navigateurs

Voir aussi

L'élément HTML <textarea>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 23 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu