mozilla

Compare Revisions

border-bottom-left-radius

Change Revisions

Revision 39764:

Revision 39764 by FredB on

Revision 39765:

Revision 39765 by teoli on

Title:
border-bottom-left-radius
border-bottom-left-radius
Slug:
CSS/border-bottom-left-radius
CSS/border-bottom-left-radius
Tags:
css, "CSS Reference", CSS3, css3-background, NeedsMobileBrowserCompatibility
css, "CSS Reference", CSS3, css3-background, NeedsMobileBrowserCompatibility
Content:

Revision 39764
Revision 39765
nn10    <h2>
11      Summary
12    </h2>
13    <p>
14      The <code>border-bottom-left-radius</code> CSS property set
 >s the rounding of the bottom-left corner of the element. The roun
 >ding can be a circle or an ellipse, or if one of the value is <co
 >de>0</code> no rounding is done and the corner is square.
15    </p>
16    <div style="text-align:center">
17      <img alt="border-radius.png" class="internal default" src="
 >/@api/deki/files/6132/=border-radius.png" style="">
18    </div>
19    <div class="note">
20      If the value of this property is not set in a {{ cssxref("b
 >order-radius") }} shorthand property that is applied to the eleme
 >nt after the <code>border-bottom-left-radius</code> CSS property,
 > the value of this property is then reset to its initial value by
 > the <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shortha
 >nd_properties">shorthand property</a>.
21    </div>
22    <ul class="cssprop" style="display:table;padding: 0.4em;borde
 >r-left:0.15em solid;background-color:#eeeeff">
23      <li style="display:table-row;padding: 3px;margin:0;">
24        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">{{ Xref_cssinitial() }}:</dfn> <code>0<
 >/code>
25      </li>
26      <li style="display:table-row;padding: 3px;margin:0;">
27        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">Applies to:</dfn> all elements
28      </li>
29      <li style="display:table-row;padding: 3px;margin:0;">
30        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">{{ Xref_cssinherited() }}:</dfn>no
31      </li>
32      <li style="display:table-row;padding: 3px;margin:0;">
33        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">{{ xref_csspercentage() }}:</dfn>yes, r
 >efer to the corresponding size of the border box
34      </li>
35      <li style="display:table-row;padding: 3px;margin:0;">
36        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">Media:</dfn> {{ Xref_cssvisual() }}
37      </li>
38      <li style="display:table-row;padding: 3px;margin:0;">
39        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">{{ Xref_csscomputed() }}:</dfn> the dim
 >ension of the semi-major and semi-minor axis, that is two absolut
 >e {{ xref_csslength() }} values
40      </li>
41      <li style="display:table-row;padding: 3px;margin:0;">
42        <dfn style="display:table-cell;padding: 0 5px;border-bott
 >om: none;cursor:inherit;">Animatable:</dfn> yes
43      </li>
44    </ul>
45    <h2>
46      Syntax
47    </h2>
48    <pre class="eval syntaxbox" style="border:1px solid #cccccc;b
 >order-bottom: none; margin-bottom:0;background-color:#ffe;border-
 >top-right-radius:1em;border-top-left-radius:1em;">
49Formal grammar: [ <var>&lt;length&gt;</var> | <var>&lt;percentage
 >&gt;</var> ] [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt
 >;</var> ]? 
50</pre>
51    <pre style="border:1px solid #cccccc;border-bottom-right-radi
 >us:1em;border-bottom-left-radius:1em;border-top:none;margin-top:0
 >;">
52border-bottom-left-radius: <em>radius</em>               /* the c
 >orner is a circle    */  E.g. border-bottom-left-radius: 3px
53border-bottom-left-radius: <em>horizontal</em> <em>vertical</em> 
 > /* the corner is an ellipsis */  E.g. border-bottom-left-radius:
 > 0.5em 1em
54 
55border-bottom-left-radius: inherit
56</pre>
57    <div style="font-size: 0.9em;">
58      <p style="float:left; margin:0:">
59        where:
60      </p>
61      <dl style="padding-left:6em;">
62        <dt style="float:left;width:7.5em">
63          <em>radius</em>
64        </dt>
65        <dd style="padding-left:7.5em">
66          Is a {{ xref_csslength() }} or a {{ xref_csspercentage(
 >) }} denoting the radius of the circle to use for the border in t
 >hat corner.
67        </dd>
68        <dt style="float:left;width:7.5em">
69          <em>horizontal</em>
70        </dt>
71        <dd style="padding-left:7.5em">
72          Is a {{ xref_csslength() }} or a {{ xref_csspercentage(
 >) }} denoting the horizontal semi-major axis of the ellipsis to u
 >se for the border in that corner.
73        </dd>
74        <dt style="float:left;width:7.5em">
75          <em>vertical</em>
76        </dt>
77        <dd style="padding-left:7.5em">
78          Is a {{ xref_csslength() }} or a {{ xref_csspercentage(
 >) }} denoting the vertical semi-major axis of the ellipsis to use
 > for the border in that corner.
79        </dd>
80      </dl>
81    </div>
n11      Summaryn83      Values
t13    <p>t85    <dl>
14      The CSS property <code>border-bottom-left-radius</code> set86      <dt>
>s the rounding of the bottom-left corner of the border. Previous  
>to Gecko 2.0 (Firefox 4.0) this was named <code>-moz-border-radiu 
>s-bottomleft.</code> 
87        &lt;length&gt;
88      </dt>
89      <dd>
90        Denotes the size of the circle radius or the semi-major a
 >nd semi-minor axes of the ellipsis. It can be expressed in any un
 >it allowed by the CSS {{ xref_csslength() }} data types.
91      </dd>
92      <dt>
93        &lt;percentage&gt;
94      </dt>
95      <dd>
96        Denotes the size of the circle radius or the semi-major a
 >nd semi-minor axes of the ellipsis using percentages values. The 
 >percentage for the horizontal axe refer to the width of the box, 
 >whereas percentages for the vertical axe refer to the height of t
 >he box.
97      </dd>
98    </dl>
99    <h2>
100      Examples
101    </h2>
102    <table class="standard-table">
103      <thead>
104        <tr>
105          <th>
106            Live example
107          </th>
108          <th>
109            Code
110          </th>
111        </tr>
112      </thead>
113      <tbody>
114        <tr>
115          <td style="padding:1.5em;">
116            <div style="background-color:lightgreen;border:solid 
 >1px black;border-bottom-left-radius:40px 40px;width:100px;height:
 >100px">
117              <div style="display:none;">
118                .
119              </div>
120            </div>
121          </td>
122          <td>
123            An arc of circle is used as the border
124            <pre>
125div {
126  border-bottom-left-radius: 40px 40px;
127}
128</pre>
129          </td>
130        </tr>
131        <tr>
132          <td style="padding:1.5em;">
133            <div style="background-color:lightgreen;border:solid 
 >1px black;border-bottom-left-radius:40px 20px;width:100px;height:
 >100px">
134              <div style="display:none;">
135                .
136              </div>
137            </div>
138          </td>
139          <td>
140            An arc of ellipse is used as the border
141            <pre>
142div {   
143  border-bottom-left-radius: 40px 20px;
144}
145</pre>
146          </td>
147        </tr>
148        <tr>
149          <td style="padding:1.5em;">
150            <div style="background-color:lightgreen;border:solid 
 >1px black;border-bottom-left-radius:40%;width:100px;height:100px"
 >>
151              <div style="display:none;">
152                .
153              </div>
154            </div>
155          </td>
156          <td>
157            The box is a square: an arc of circle is used as the 
 >border
158            <pre>
159div {   
160  border-bottom-left-radius: 40%;
161}
162</pre>
163          </td>
164        </tr>
165        <tr>
166          <td style="padding:1.5em;">
167            <div style="background-color:lightgreen;border:solid 
 >1px black;border-bottom-left-radius:40%;width:100px;height:200px"
 >>
168              <div style="display:none;">
169                .
170              </div>
171            </div>
172          </td>
173          <td>
174            The box is not a square: an arc of ellipse is used as
 > the border
175            <pre>
176div {   
177  border-bottom-left-radius: 40%;
178}
179</pre>
180          </td>
181        </tr>
182      </tbody>
183    </table>
184    <h2 name="Specifications">
185      Specifications
186    </h2>
187    <table class="standard-table">
188      <thead>
189        <tr style="background-color: rgb(255, 204, 255);">
190          <th scope="col">
191            Specification
192          </th>
193          <th scope="col">
194            Status
195          </th>
196          <th scope="col">
197            Comment
198          </th>
199        </tr>
200      </thead>
201      <tbody>
202        <tr>
203          <td>
204            <a class="external" href="http://dev.w3.org/csswg/css
 >3-background/#the-border-radius" title="http://dev.w3.org/csswg/c
 >ss3-background/#the-border-radius">CSS Backgrounds and Borders Mo
 >dule Level 3</a>
205          </td>
206          <td>
207            {{ Spec2('CSS3 Backgrounds') }}
208          </td>
209          <td>
210            Initial specification
211          </td>
212        </tr>
213      </tbody>
214    </table>
215    <h2>
216      Browser compatibility
217    </h2>
15    </p>218    <p>
219      {{ CompatibilityTable() }}
16    <p>220    </p>
17      See the <code><a href="../../../../en/CSS/border-top-left-r221    <div id="compat-desktop">
>adius" rel="custom nofollow">border-top-left-radius</a></code> an 
>d <code><a href="../../../../en/CSS/border-radius" rel="custom no 
>follow">border-radius</a></code> properties for more information. 
222      <table class="compat-table">
223        <tbody>
224          <tr>
225            <th>
226              Feature
227            </th>
228            <th>
229              Chrome
230            </th>
231            <th>
232              Firefox (Gecko)
233            </th>
234            <th>
235              Internet Explorer
236            </th>
237            <th>
238              Opera
239            </th>
240            <th>
241              Safari (WebKit)
242            </th>
243          </tr>
244          <tr>
245            <td rowspan="2">
246              Basic support
247            </td>
248            <td>
249              0.2 {{ property_prefix("-webkit") }}
250            </td>
251            <td>
252              <p>
253                1.0 (1.0) {{ property_prefix("-moz") }}<br>
254                but with a non-standard name :<br>
255                <code>-moz-border-radius-bottomleft</code>
256              </p>
257            </td>
258            <td rowspan="2">
259              9.0
260            </td>
261            <td rowspan="2">
262              10.5
263            </td>
264            <td>
265              3.0 (522){{ property_prefix("-webkit") }}
266            </td>
267          </tr>
268          <tr>
269            <td>
270              4.0
271            </td>
272            <td>
273              4.0 (2.0)
274            </td>
275            <td>
276              5.0 (532.5)
277            </td>
278          </tr>
279          <tr>
280            <td rowspan="2">
281              Percentages
282            </td>
283            <td rowspan="2">
284              4.0
285            </td>
286            <td>
287              1.0 (1.0) with a bug (see note)
288            </td>
289            <td rowspan="2">
290              9.0
291            </td>
292            <td rowspan="2">
293              10.5
294            </td>
295            <td rowspan="2">
296              5.0 (532.5)
297            </td>
298          </tr>
299          <tr>
300            <td>
301              4.0 (2.0)
302            </td>
303          </tr>
304          <tr>
305            <td>
306              Elliptical corners
307            </td>
308            <td>
309              0.2
310            </td>
311            <td>
312              3.5 (1.9.1)
313            </td>
314            <td>
315              9.0
316            </td>
317            <td>
318              10.5
319            </td>
320            <td>
321              3.0 (522 )
322            </td>
323          </tr>
324        </tbody>
325      </table>
326    </div>
327    <div id="compat-mobile">
328      <table class="compat-table">
329        <tbody>
330          <tr>
331            <th>
332              Feature
333            </th>
334            <th>
335              Android
336            </th>
337            <th>
338              Firefox Mobile (Gecko)
339            </th>
340            <th>
341              IE&nbsp;Phone
342            </th>
343            <th>
344              Opera Mobile
345            </th>
346            <th>
347              Safari Mobile
348            </th>
349          </tr>
350          <tr>
351            <td>
352              Basic support
353            </td>
354            <td>
355              {{ CompatUnknown() }}
356            </td>
357            <td>
358              {{ CompatUnknown() }}
359            </td>
360            <td>
361              {{ CompatUnknown() }}
362            </td>
363            <td>
364              {{ CompatUnknown() }}
365            </td>
366            <td>
367              {{ CompatUnknown() }}
368            </td>
369          </tr>
370        </tbody>
371      </table>
372    </div>
373    <h3>
374      Browser notes
375    </h3>
376    <h4>
377      Gecko
378    </h4>
379    <ul>
380      <li>The prefixed version (allowed from Firefox 1 to Firefox
 > 13) of this property uses a different name, <code>-moz-border-ra
 >dius-bottomleft</code>, than the final property as Mozilla implem
 >ented it before the final name was coined.
381      </li>
382      <li>Before Firefox 4, the {{ xref_csspercentage() }} was re
 >lative to the width of the box even when specifying the radius fo
 >r a height). This implied that <code>-moz-border-radius-bottomlef
 >t</code> was always drawing an arc of circle, and never an ellips
 >e, when followed by a single value.
383      </li>
384    </ul>
385    <h2>
386      See also
387    </h2>
18    </p>388    <p>
19    <p>389      The border-radius-related CSS properties: the CSS shorthand
 > {{ cssxref("border-radius") }}, the properties for the other cor
 >ners: {{ cssxref("border-top-right-radius") }}, {{ cssxref("borde
 >r-bottom-right-radius") }}, and {{ cssxref("border-top-left-radiu
 >s") }}.
20      &nbsp;

Back to History