diff options
Diffstat (limited to 'files/fr/web/css/border-top-right-radius/index.md')
| -rw-r--r-- | files/fr/web/css/border-top-right-radius/index.md | 137 |
1 files changed, 58 insertions, 79 deletions
diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md index 51c7324d0f..1032da0ec7 100644 --- a/files/fr/web/css/border-top-right-radius/index.md +++ b/files/fr/web/css/border-top-right-radius/index.md @@ -7,21 +7,20 @@ tags: - Reference translation_of: Web/CSS/border-top-right-radius --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>border-top-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à droite 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.</p> +La propriété **`border-top-right-radius`** définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut `0`, aucun arrondi n'a lieu et le coin est un angle droit. -<div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}} -<p>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> +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")}}. -<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-radius-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> +> **Note :** 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 `border-top-radius-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de [la propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle */ +```css +/* Le coin est un quart de cercle */ /* La valeur indique le rayon de courbure */ border-top-right-radius: 3px; @@ -32,36 +31,31 @@ border-top-right-radius: 3px; border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; -</pre> +``` -<p>Cette propriété peut prendre deux formes :</p> +Cette propriété peut prendre deux formes : -<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> +- Une première avec une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure pour ce coin +- Une seconde avec deux valeurs -<h3 id="Valeurs">Valeurs</h3> + - La première est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin + - La seconde est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin -<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<code>.</code></dd> -</dl> +### Valeurs -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +- `<length-percentage>` + - : 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`.` + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { background-color: lightgreen; border: solid 1px black; width: 100px; @@ -86,53 +80,38 @@ border-top-right-radius: inherit; 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-right-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-right-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-left-radius")}},</li> - <li>{{cssxref("border-bottom-right-radius")}},</li> - <li>{{cssxref("border-bottom-left-radius")}}.</li> - </ul> - </li> -</ul> +``` + +### HTML + +```html + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> +``` + +### Résultat + +{{EmbedLiveSample("Exemples","200","540")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.border-top-right-radius")}} + +## Voir aussi + +- La propriété raccourcie {{cssxref("border-radius")}} +- Les propriétés pour les autres coins : + + - {{cssxref("border-top-left-radius")}}, + - {{cssxref("border-bottom-right-radius")}}, + - {{cssxref("border-bottom-left-radius")}}. |