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
|
---
title: '-moz-outline-radius'
slug: Web/CSS/-moz-outline-radius
tags:
- CSS
- No estándar(2)
- Referencia CSS
translation_of: Web/CSS/-moz-outline-radius
---
<div>{{Non-standard_header}}{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>En aplicaciones de Mozilla como Firefox, la propiedad CSS <code>-moz-outline-radius</code> puede ser usada para a los contornos de esquinas redondeadas. Un {{cssxref("outline")}} es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.</p>
<p><code>-moz-outline-radius</code> es un atajo para establecer las cuatro propiedades{{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} y {{cssxref("-moz-outline-radius-bottomleft")}}.</p>
<p>{{cssinfo}}</p>
<h2 id="Síntaxis">Síntaxis</h2>
<pre class="brush:css">/* Un valor */
-moz-outline-radius: 25px;
/* Dos valores */
-moz-outline-radius: 25px 1em;
/* Tres valores */
-moz-outline-radius: 25px 1em 12%;
/* Cuator valores */
-moz-outline-radius: 25px 1em 12% 4mm;
/* valores globales */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;
</pre>
<h3 id="Valores">Valores</h3>
<div class="note">Los contornos elípticos y los valores <code><porcentaje></code> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.</div>
<p>Uno, dos,tres o cuatro valores <code><outline-radius></code> , representan uno de los siguientes casos:</p>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>Ver {{cssxref("<length>")}} para ver los posibles valores.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>Un {{cssxref("<percentage>")}}; ver {{cssxref("border-radius")}} para más detalles.</dd>
</dl>
<ul>
<li>Si se establece un único valor se aplica a las cuatro esquinas-</li>
<li>Si se establecen dos valores, el primero se aplica a la esquina superior-izquierda e inferior-derecha y el segundo a las esquinas superior-derecha e inferior-izquierda</li>
<li>Si se establecen tres valores el primero se aplica a la esquina superior-izquierda, el segundo a las esquinas superior-derecha e inferior-izquierda y el tercero a la esquina inferior-derecha.</li>
<li>Si se establecen cautro valores el primero se aplica a la esquina superior-izquierda, el segundo a la esquina superior-derecha, el tercero la esquina inferior-derecha y el cuarto a la esquina inferior-izquierda.</li>
</ul>
<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
{{csssyntax}}
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><style>
p {
border: 1px solid black; <code class="language-css"><span class="property token">
outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">;</span> <span class="property token">-moz-outline-radius</span><span class="punctuation token">:</span> <span class="number token">12%</span> <span class="number token">1</span>em <span class="number token">25</span>px<span class="punctuation token">;</span></code>
}
</style> </head>
<body> <p>La propiedad outline-style usando <code class="language-css"><span class="property token">-moz-outline-radius</span></code></p> </body>
<head> <style>
p1 {
border: 1px solid black; <code class="language-css"><span class="property token">outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">; </span></code><code class="language-css"><span class="property token">
-moz-outline-radius-topleft</span><span class="punctuation token">:</span> <span class="number token">12%</span><span class="punctuation token">;</span> <span class="property token">
-moz-outline-radius-topright</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span> <span class="property token">
-moz-outline-radius-bottomright</span><span class="punctuation token">:</span> <span class="number token">35</span>px<span class="punctuation token">;</span> <span class="property token">
-moz-outline-radius-bottomleft</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span></code> }
</style> </head>
<body> <p1>La propiedad outline-style usando un <code class="language-css"><span class="property token">-moz-outline-radius-xxx más complicado</span></code></p1> </body>
</pre>
<h3 id="Result"><strong>Result</strong></h3>
<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-outline-radius') }}</p>
<h2 id="Notas">Notas</h2>
<ul>
<li><code>Las esquinas con radio dotted</code> o <code>dashed</code> se muestran como solid, {{bug("382721")}}</li>
<li>Existe la posibilidad de que futuras versiones del motor Gecko/Firefox eliminen esta propiedad completamente. Ver {{bug("593717")}}.</li>
</ul>
<h2 id="Especificaciones">Especificaciones</h2>
<p>Esta propiedad no se define es ningún estándar CSS.</p>
<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
{{Compat("css.properties.-moz-outline-radius")}}
|
