shape-outside

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS shape-outside définit une forme — qui peut ne pas être rectangulaire — autour de laquelle le contenu en ligne adjacent doit « s'écouler ». Par défaut, le contenu en ligne s'écoule autour de la boîte de marge de l'élément ; shape-outside permet de personnaliser cet écoulement, rendant possible l'enveloppement du texte autour d'objets complexes plutôt que de simples rectangles.

Exemple interactif

shape-outside: circle(50%);

shape-outside: ellipse(130px 140px at 20% 20%);

shape-outside: url("/shared-assets/images/examples/round-balloon.png");

shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/round-balloon.png"
      width="150" />
    Nous avions convenu, mon compagnon et moi, que je devrais passer le voir
    chez lui, après le dîner, pas plus tard que onze heures. Ce jeune Français
    athlétique appartient à un petit groupe de sportifs parisiens, qui se sont
    adonnés au «&nbsp;ballon&nbsp;» comme passe-temps. Après avoir épuisé toutes
    les sensations que l'on peut trouver dans les sports ordinaires, même celles
    de «&nbsp;l'automobile&nbsp;» à toute vitesse, les membres de «&nbsp;l'Aéro
    Club&nbsp;» recherchent maintenant dans les airs, où ils se livrent à toutes
    sortes d'exploits audacieux, l'excitation nerveuse qu'ils ont cessé de
    trouver sur terre.
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Valeurs utilisant une fonction */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* Boîte de forme avec une forme de base */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();

/* Valeurs de type <url> */
shape-outside: url("image.png");

/* Valeurs de type <gradient> */
shape-outside: linear-gradient(45deg, white 150px, red 150px);

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

La propriété shape-outside est définie en utilisant les valeurs de la liste ci-dessous, qui définissent la zone de flottement pour les éléments flottants. La zone de flottement détermine la forme autour de laquelle le contenu en ligne (éléments flottants) s'enroule.

Valeurs

none

La zone de flottement n'est pas affectée. Le contenu en ligne s'enroule autour de la boîte de marge de l'élément, comme d'habitude.

<shape-box>

La zone de flottement est calculée en fonction de la forme des bords de l'élément flottant (comme défini par le modèle de boîte CSS). Cela peut être margin-box, border-box, padding-box ou content-box. La forme inclut toute courbure créée par la propriété border-radius (comportement similaire à background-clip).

margin-box: Définit la forme entourée par le bord extérieur de la marge. Les rayons des coins de cette forme sont déterminés par les valeurs correspondantes de border-radius et margin. Si le ratio border-radius / margin est 1 ou plus, alors le rayon du coin de la boîte de marge est border-radius + margin. Si le ratio est inférieur à 1, alors le rayon du coin de la boîte de marge est border-radius + (margin * (1 + (ratio - 1) ^ 3)).
border-box: Définit la forme entourée par le bord extérieur de la bordure. La forme suit les règles normales de courbure des coins pour l'extérieur de la bordure.
padding-box: Définit la forme entourée par le bord extérieur du remplissage. La forme suit les règles normales de courbure des coins pour l'intérieur de la bordure.
content-box: Définit la forme entourée par le bord extérieur du contenu. Chaque rayon de coin de cette boîte est le plus grand de 0 ou border-radius - border-width - padding.

<basic-shape>

La zone de flottement est calculée en fonction de la forme créée par une fonction inset(), circle(), ellipse(), ou polygon() ; les autres fonctions <basic-shape> sont invalides. Si une <shape-box> est également fournie, elle définit la boîte de référence pour la fonction <basic-shape>. Sinon, la boîte de référence par défaut est margin-box.

<image>

La zone de flottement est extraite et calculée en fonction du canal alpha de l'<image> défini, comme défini par shape-image-threshold.

Note : Si l'image est invalide, l'effet est comme si le mot-clé none avait été défini. De plus, l'image doit être servie avec des en-têtes CORS permettant son utilisation.

Définition formelle

Valeur initiale	`none`
Applicabilité	flottants
Héritée	non
Valeur calculée	comme défini pour `<basic-shape>` (avec `shape-box` qui suit s'il est utilisé), l'`<image>` avec son URI rendue absolue, sinon, comme défini.
Type d'animation	oui, comme défini pour `<basic-shape>`, sinon, non

Syntaxe formelle

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<basic-shape> = 
  <basic-shape-rect>  |
  <circle()>          |
  <ellipse()>         |
  <polygon()>         |
  <path()>            |
  <shape()>           

<shape-box> = 
  <visual-box>     |
  margin-box       |
  half-border-box  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<basic-shape-rect> = 
  <inset()>  |
  <rect()>   |
  <xywh()>   

<circle()> = 
  circle( <radial-size>? [ at <position> ]? )  

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )  

<polygon()> = 
  polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )  

<path()> = 
  path( <'fill-rule'>? , <string> )  

<shape()> = 
  shape( <'fill-rule'>? from <position> , <shape-command># )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )  

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )  

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<fill-rule> = 
  nonzero  |
  evenodd  

<length-percentage> = 
  <length>      |
  <percentage>  

<shape-command> = 
  <move-command>             |
  <line-command>             |
  close                      |
  <horizontal-line-command>  |
  <vertical-line-command>    |
  <curve-command>            |
  <smooth-command>           |
  <arc-command>              

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<move-command> = 
  move <command-end-point>  

<line-command> = 
  line <command-end-point>  

<horizontal-line-command> = 
  hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ]  

<vertical-line-command> = 
  vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]  

<curve-command> = 
  curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]  

<smooth-command> = 
  smooth [ [ to <position> [ with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]  

<arc-command> = 
  arc <command-end-point> [ [ of <length-percentage>{1,2} ] && <arc-sweep>? && <arc-size>? && [ rotate <angle> ]? ]  

<command-end-point> = 
  to <position>         |
  by <coordinate-pair>  

<control-point> = 
  <position>                |
  <relative-control-point>  

<coordinate-pair> = 
  <length-percentage>{2}  

<relative-control-point> = 
  <coordinate-pair> [ from [ start | end | origin ] ]?  

<arc-sweep> = 
  cw   |
  ccw  

<arc-size> = 
  large  |
  small

Exemples

Texte en entonnoir

HTML

html

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Parfois, le contenu textuel d'une page web semble canaliser votre attention
    vers un point précis de la page pour vous inciter à suivre un lien
    particulier. Parfois, vous ne le remarquez pas.
  </p>
</div>

CSS

css

.main {
  width: 530px;
}

.left,
.right {
  background-color: lightgray;
  height: 12ex;
  width: 40%;
}

.left {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

Résultat

Spécifications

Spécification
CSS Shapes Module Level 1 # shape-outside-property

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

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

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