---
title: shape
slug: Web/CSS/@media/shape
tags:
  - '@media'
  - CSS
  - Caractéristique média
  - Reference
  - Règle @
translation_of: Web/CSS/@media/shape
---
<div>{{CSSRef}} {{Non-standard_header}}</div>

<p>La caractéristique média <strong><code>shape</code></strong> peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>La caractéristique <code>shape</code> peut prendre une valeur parmi deux valeurs définies : <code>rect</code> qui représente un écran rectangulaire ou <code>round</code> qui représente un écran circulaire, ovale ou elliptique.</p>

<dl>
 <dt><code><dfn>rect</dfn></code></dt>
 <dd>La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.</dd>
 <dt><code><dfn>round</dfn></code></dt>
 <dd>La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<div class="blockIndicator note">
<p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p>
</div>

<h3 id="Exemple_simple">Exemple simple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;h1&gt;Coucou le monde !&lt;/h1&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}
</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Exemple_simple")}}</p>

<h3 id="Feuille_de_style_spécifique">Feuille de style spécifique</h3>

<p>Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.</p>

<pre class="brush: html"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="default.css" /&gt;</code>
<code>    &lt;link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /&gt;
    &lt;link media="screen and (shape: round)" rel="stylesheet" href="round.css" /&gt;
&lt;/head&gt;
</code></pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><em><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></em></td>
   <td>Brouillon</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.at-rules.media.shape")}}</p>