---
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>&lt;porcentaje&gt;</code> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.</div>

<p>Uno, dos,tres o cuatro valores  <code>&lt;outline-radius&gt;</code> , representan uno de los siguientes casos:</p>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Ver {{cssxref("&lt;length&gt;")}} para ver los posibles valores.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>Un {{cssxref("&lt;percentage&gt;")}}; 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>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Ejemplo">Ejemplo</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;style&gt;
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>
}
&lt;/style&gt; &lt;/head&gt;

&lt;body&gt; &lt;p&gt;La propiedad  outline-style usando <code class="language-css"><span class="property token">-moz-outline-radius</span></code>&lt;/p&gt; &lt;/body&gt;

&lt;head&gt; &lt;style&gt;
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> }
&lt;/style&gt; &lt;/head&gt;

&lt;body&gt; &lt;p1&gt;La propiedad outline-style usando un <code class="language-css"><span class="property token">-moz-outline-radius-xxx más complicado</span></code>&lt;/p1&gt; &lt;/body&gt;
</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>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("1.8")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>