files/fr/web/css/border-bottom-left-radius/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

---
title: border-bottom-left-radius
slug: Web/CSS/border-bottom-left-radius
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/border-bottom-left-radius
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>border-bottom-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.</p>

<div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div>

<p>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")}}.</p>

<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-bottom-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-bottom-left-radius: 3px;

/* Valeurs avec un pourcentage */
border-bottom-left-radius: 20%;

/* Le coin est un quart d'ellipse         */
/* La première valeur indique le demi-axe */
/* horizontal et la seconde le demi-axe   */
/* vertical                               */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;
</pre>

<p>Cette propriété peut prendre deux formes :</p>

<ul>
 <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</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>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</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>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</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>&lt;length-percentage&gt;</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("&lt;length&gt;")}}. 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-bottom-left-radius: 40px 40px;
}

.arc_ellipse {
  border-bottom-left-radius: 40px 20px;
}

.pourcentage {
  border-bottom-left-radius: 40%;
}

.rognage {
  border: black 10px double;
  border-bottom-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"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
 &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
 &lt;div class="pourcentage"&gt;&lt;/div&gt;
 &lt;div class="rognage"&gt;&lt;/div&gt;</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', '#border-bottom-left-radius', 'border-bottom-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-bottom-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-top-left-radius")}},</li>
   <li>{{cssxref("border-bottom-right-radius")}}.</li>
  </ul>
 </li>
</ul>