resize

Limited availability

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

La propriété resize permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.

Exemple interactif

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

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

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: 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 pour que celui-ci le redimensionne.
both: L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.
horizontal: L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).
vertical: L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).
block Expérimental: Selon les valeurs de writing-mode et direction, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.
inline Expérimental: Selon les valeurs de writing-mode et direction, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.

Note : resize ne s'applique pas aux blocs dont la propriété overflow vaut visible.

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 spécifié
Type d'animation	discrète

Syntaxe formelle

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

Exemples

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

CSS

Par défaut, les éléments <textarea> peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :

css

textarea.exemple {
  resize: none;
}

HTML

html

<textarea class="exemple">Saisir du texte ici.</textarea>

Résultat

Utiliser `resize` sur des éléments quelconques

La propriété resize peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte <div> redimensionnable qui contient un paragraphe ((<p>) lui-même redimensionnable) :

CSS

css

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

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

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

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>

Résultat

Spécifications

Specification
CSS Basic User Interface Module Level 4 # resize

Compatibilité des navigateurs

Voir aussi

<textarea>

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨9 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content