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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
---
title: border-bottom-right-radius
slug: Web/CSS/border-bottom-right-radius
tags:
- Bordes CSS
- Propiedad CSS
- Referencia
translation_of: Web/CSS/border-bottom-right-radius
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <strong><code>border-bottom-right-radius</code></strong> establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0</code>, no se redondeará la esquina, dejándola cuadrada.</p>
<div style="text-align: center;"><img alt="border-bottom-right-radius.png" class="default internal" src="/@api/deki/files/6134/=border-bottom-right-radius.png"></div>
<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p>
<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-bottom-right-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css">/* la esquina es un círculo */
/* border-bottom-right-radius: <em>radius</em> */
border-bottom-right-radius: 3px;
/* la esquina es una elipse */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;
border-bottom-right-radius: inherit;
</pre>
<div style="font-size: 0.9em;">
<p style="">donde:</p>
<dl style="padding-left: 6em;">
<dt style="float: left; width: 7.5em;"><em>radius</em></dt>
<dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd>
<dt style="float: left; width: 7.5em;"><em>horizontal</em></dt>
<dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd>
<dt style="float: left; width: 7.5em;"><em>vertical</em></dt>
<dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd>
</dl>
</div>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><length></code></dt>
<dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.</dd>
<dt><code><percentage></code></dt>
<dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</h2>
<table class="standard-table">
<thead>
<tr>
<th>Ejemplo en vivo</th>
<th>Código</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 1.5em;">
<div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;">
<div class="hidden">.</div>
</div>
</td>
<td>Un arco de círculo usado como borde
<pre class="brush: css">
div {
border-bottom-right-radius: 40px 40px;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;">
<div class="hidden">.</div>
</div>
</td>
<td>Un arco de elipse usado como borde
<pre class="brush: css">
div {
border-bottom-right-radius: 40px 20px;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;">
<div class="hidden">.</div>
</div>
</td>
<td>La caja es un cuadro: un arco de círculo es usado como borde
<pre class="brush: css">
div {
border-bottom-right-radius: 40%;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;">
<div class="hidden">.</div>
</div>
</td>
<td>La caja no es un círculo: un arco de elipse es usado como borde
<pre class="brush: css">
div {
border-bottom-right-radius: 40%;
}
</pre>
</td>
</tr>
<tr>
<td style="padding: 1.5em;">
<div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
<div class="hidden">.</div>
</div>
</td>
<td>El color de fondo está delimitado al borde
<pre class="brush: css">
div {
border-bottom-right-radius:40%;
border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box;
}
</pre>
</td>
</tr>
</tbody>
</table>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
{{Compat("css.properties.border-bottom-right-radius")}}
<h2 id="Véase_también">Véase también</h2>
<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p>
|
