From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/border-radius/index.html | 254 ------------------------------ files/fr/web/css/border-radius/index.md | 254 ++++++++++++++++++++++++++++++ 2 files changed, 254 insertions(+), 254 deletions(-) delete mode 100644 files/fr/web/css/border-radius/index.html create mode 100644 files/fr/web/css/border-radius/index.md (limited to 'files/fr/web/css/border-radius') diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html deleted file mode 100644 index 540cf83bc4..0000000000 --- a/files/fr/web/css/border-radius/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: border-radius -slug: Web/CSS/border-radius -tags: - - CSS - - Propriété - - Reference - - Web -translation_of: Web/CSS/border-radius ---- -
{{CSSRef}}
- -

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

- -
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
- -

La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.

- -

Cette propriété est une propriété raccourcie qui permet de définir :

- - - -

La propriété border-radius ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut collapse.

- -
-

Note : Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (border-radius:0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.

-
- -

Syntaxe

- -
/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
-/* On utilise le même rayon pour les quatre angles */
-border-radius: 10px;
-
-/* 1. coin en haut à gauche et en bas à droite      */
-/* 2. puis coin en haut à droite et en bas à gauche */
-border-radius: 10px 5%;
-
-/* 1. coin en haut à gauche                    */
-/* 2. coin en haut à droite et en bas à gauche */
-/* 3. coin en bas à droite                     */
-border-radius: 2px 4px 2px;
-
-/* 1. coin en haut à gauche */
-/* 2. coin en haut à droite */
-/* 3. coin en bas à droite  */
-/* 4. coin en bas à gauche  */
-border-radius: 1px 0 3px 4px;
-
-/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
-/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
-/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
-border-radius: 10px 5% / 20px;
-
-/* rayons horizontaux puis / puis rayons verticaux */
-/* 1. coin en haut à gauche et en bas à droite      */
-/* 2. puis coin en haut à droite et en bas à gauche */
-border-radius: 10px 5% / 20px 30px;
-
-/* rayons horizontaux puis / puis rayons verticaux */
-/* 1. coin en haut à gauche                        */
-/* 2. coin en haut à droite et en bas à gauche     */
-/* 3. coin en bas à droite                         */
-border-radius: 10px 5px 2em / 20px 25px 30%;
-
-/* rayons horizontaux puis / puis rayons verticaux */
-/* 1. coin en haut à gauche                        */
-/* 2. coin en haut à droite                        */
-/* 3. coin en bas à droite                         */
-/* 4. coin en bas à gauche                         */
-border-radius: 10px 5% / 20px 25em 30px 35em;
-
-/* Valeurs globales */
-border-radius: inherit;
-border-radius: initial;
-border-radius: unset;
-
- -

La propriété border-radius peut être définie avec :

- - - -

Valeurs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Une seule valeurUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.
Deux valeurs (coin en haut à gauche et en bas à droite)Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.
Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.
Coin en haut à gaucheUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en haut à droiteUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
Coin en bas à droiteUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en bas à gaucheUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
- -
-
<length>
-
Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("<length>")}}. Les valeurs négatives sont considérées comme invalides.
-
<percentage>
-
Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("<percentage>")}} pour plus de détails.
-
- -

Ainsi :

- -
border-radius: 1em/5em;
-
-/* est équivalent à */
-
-border-top-left-radius:     1em 5em;
-border-top-right-radius:    1em 5em;
-border-bottom-right-radius: 1em 5em;
-border-bottom-left-radius:  1em 5em;
-
- -
border-radius: 4px 3px 6px / 2px 4px;
-
-/* est équivalent à : */
-
-border-top-left-radius:     4px 2px;
-border-top-right-radius:    3px 4px;
-border-bottom-right-radius: 6px 2px;
-border-bottom-left-radius:  3px 4px;
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  height: 100px;
-  width: 200px;
-  border-style: solid;
-  border-color: black;
-  background-color: palegreen;
-}
-
-.arrondi_droit {
-  border-radius: 10px 40px 40px 10px;
-}
-
-.ellipse {
-  border-radius: 50%;
-}
-
-.pointille {
-  border: dotted;
-  border-width: 10px 4px;
-  border-radius: 10px 40px;
-}
-
-.tirets {
-  border: dashed;
-  border-width: 2px 4px;
-  border-radius: 40px;
-
-}
-
-.slash {
-  border-radius: 13em/3em;
-}
-
- -

HTML

- -
<div class="arrondi_droit"></div>
-
-<div class="ellipse"></div>
-
-<div class="tirets"></div>
-
-<div class="pointille"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","400")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/border-radius/index.md b/files/fr/web/css/border-radius/index.md new file mode 100644 index 0000000000..540cf83bc4 --- /dev/null +++ b/files/fr/web/css/border-radius/index.md @@ -0,0 +1,254 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - Propriété + - Reference + - Web +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ +

La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.

+ +

Cette propriété est une propriété raccourcie qui permet de définir :

+ + + +

La propriété border-radius ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut collapse.

+ +
+

Note : Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (border-radius:0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.

+
+ +

Syntaxe

+ +
/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
+/* On utilise le même rayon pour les quatre angles */
+border-radius: 10px;
+
+/* 1. coin en haut à gauche et en bas à droite      */
+/* 2. puis coin en haut à droite et en bas à gauche */
+border-radius: 10px 5%;
+
+/* 1. coin en haut à gauche                    */
+/* 2. coin en haut à droite et en bas à gauche */
+/* 3. coin en bas à droite                     */
+border-radius: 2px 4px 2px;
+
+/* 1. coin en haut à gauche */
+/* 2. coin en haut à droite */
+/* 3. coin en bas à droite  */
+/* 4. coin en bas à gauche  */
+border-radius: 1px 0 3px 4px;
+
+/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
+/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
+/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
+border-radius: 10px 5% / 20px;
+
+/* rayons horizontaux puis / puis rayons verticaux */
+/* 1. coin en haut à gauche et en bas à droite      */
+/* 2. puis coin en haut à droite et en bas à gauche */
+border-radius: 10px 5% / 20px 30px;
+
+/* rayons horizontaux puis / puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite et en bas à gauche     */
+/* 3. coin en bas à droite                         */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* rayons horizontaux puis / puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite                        */
+/* 3. coin en bas à droite                         */
+/* 4. coin en bas à gauche                         */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Valeurs globales */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+
+ +

La propriété border-radius peut être définie avec :

+ + + +

Valeurs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Une seule valeurUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.
Deux valeurs (coin en haut à gauche et en bas à droite)Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.
Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)Une valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.
Coin en haut à gaucheUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en haut à droiteUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
Coin en bas à droiteUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.
Coin en bas à gaucheUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.
+ +
+
<length>
+
Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("<length>")}}. Les valeurs négatives sont considérées comme invalides.
+
<percentage>
+
Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("<percentage>")}} pour plus de détails.
+
+ +

Ainsi :

+ +
border-radius: 1em/5em;
+
+/* est équivalent à */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* est équivalent à : */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  height: 100px;
+  width: 200px;
+  border-style: solid;
+  border-color: black;
+  background-color: palegreen;
+}
+
+.arrondi_droit {
+  border-radius: 10px 40px 40px 10px;
+}
+
+.ellipse {
+  border-radius: 50%;
+}
+
+.pointille {
+  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+}
+
+.tirets {
+  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+}
+
+.slash {
+  border-radius: 13em/3em;
+}
+
+ +

HTML

+ +
<div class="arrondi_droit"></div>
+
+<div class="ellipse"></div>
+
+<div class="tirets"></div>
+
+<div class="pointille"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","400")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf