diff options
Diffstat (limited to 'files/fr/web/css/border-top-left-radius/index.md')
| -rw-r--r-- | files/fr/web/css/border-top-left-radius/index.md | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md new file mode 100644 index 0000000000..0c34d5e94d --- /dev/null +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -0,0 +1,136 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-left-radius +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>border-top-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div> + +<div class="note"> + <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle */ +/* La valeur indique le rayon de courbure */ +border-top-left-radius: 3px; + +/* Le coin est un quart d'ellipse */ +/* La première valeur indique le demi-axe */ +/* horizontal et la seconde le demi-axe */ +/* vertical */ +border-top-left-radius: 0.5em 1em; + +border-top-left-radius: inherit; +</pre> + +<p>Cette propriété peut prendre deux formes :</p> + +<ul> + <li>Une première avec une longueur (<code><length></code>) ou un pourcentage (<code><percentage></code>) qui indique le rayon de courbure pour ce coin</li> + <li>Une seconde avec deux valeurs + <ul> + <li>La première est une longueur (<code><length></code>) ou un pourcentage (<code><percentage></code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li> + <li>La seconde est une longueur (<code><length></code>) ou un pourcentage (<code><percentage></code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li> + </ul> + </li> +</ul> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 130px; +} + +.arc_cercle { + border-top-left-radius: 40px 40px; +} + +.arc_ellipse { + border-top-left-radius: 40px 20px; +} + +.pourcentage { + border-top-left-radius: 40%; +} + +.rognage { + border: black 10px double; + border-top-left-radius: 40%; + background-color: rgb(250,20,70); + background-clip: content-box; // essayez margin-box... +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"> <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","540")}}</p> + +<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>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.properties.border-top-left-radius")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La propriété raccourcie {{cssxref("border-radius")}}</li> + <li>Les propriétés pour les autres coins : + <ul> + <li>{{cssxref("border-top-right-radius")}},</li> + <li>{{cssxref("border-bottom-right-radius")}},</li> + <li>{{cssxref("border-bottom-left-radius")}}.</li> + </ul> + </li> +</ul> |