From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/border-top-left-radius/index.md | 135 ++++++++++------------- 1 file changed, 57 insertions(+), 78 deletions(-) (limited to 'files/fr/web/css/border-top-left-radius') diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md index 0c34d5e94d..c6de181fc3 100644 --- a/files/fr/web/css/border-top-left-radius/index.md +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -7,19 +7,18 @@ tags: - Reference translation_of: Web/CSS/border-top-left-radius --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété border-top-left-radius 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 0, 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")}}.

+La propriété **`border-top-left-radius`** 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 `0`, 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")}}. -
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
+{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}} -
-

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-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

-
+> **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-left-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). -

Syntaxe

+## Syntaxe -
/* Le coin est un quart de cercle         */
+```css
+/* Le coin est un quart de cercle         */
 /* La valeur indique le rayon de courbure */
 border-top-left-radius: 3px;
 
@@ -30,36 +29,31 @@ border-top-left-radius: 3px;
 border-top-left-radius: 0.5em 1em;
 
 border-top-left-radius: inherit;
-
+``` -

Cette propriété peut prendre deux formes :

+Cette propriété peut prendre deux formes : - +- Une première avec une longueur (``) ou un pourcentage (``) qui indique le rayon de courbure pour ce coin +- Une seconde avec deux valeurs -

Valeurs

+ - La première est une longueur (``) ou un pourcentage (``) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin + - La seconde est une longueur (``) ou un pourcentage (``) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin -
-
<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.
-
+### Valeurs -

Syntaxe formelle

+- `` + - : 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}} -

Exemples

+## Exemples -

CSS

+### CSS -
div {
+```css
+div {
   background-color: lightgreen;
   border: solid 1px black;
   width: 100px;
@@ -84,53 +78,38 @@ border-top-left-radius: inherit;
   background-color: rgb(250,20,70);
   background-clip: content-box; // essayez margin-box...
 }
-
- -

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ÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-top-left-radius")}}

- -

Voir aussi

- -
    -
  • La propriété raccourcie {{cssxref("border-radius")}}
    • -
  • Les propriétés pour les autres coins : -
      -
    • {{cssxref("border-top-right-radius")}},
      • -
    • {{cssxref("border-bottom-right-radius")}},
      • -
    • {{cssxref("border-bottom-left-radius")}}.
      • -
    -
    • -
+``` + +### HTML + +```html + 
+ 
+ 
+ 
+``` + +### Résultat + +{{EmbedLiveSample("Exemples","200","540")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.border-top-left-radius")}} + +## Voir aussi + +- La propriété raccourcie {{cssxref("border-radius")}} +- Les propriétés pour les autres coins : + + - {{cssxref("border-top-right-radius")}}, + - {{cssxref("border-bottom-right-radius")}}, + - {{cssxref("border-bottom-left-radius")}}. -- cgit v1.2.3-54-g00ecf