Revision 1046668 of -moz-outline-radius

<div>{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Summary">Summary</h2>

<p>In Mozilla applications like Firefox, the <code>-moz-outline-radius</code> CSS property can be used to give outlines rounded corners. An {{cssxref("outline")}} is a line that is drawn around elements, outside the border edge, to make the element stand out.</p>

<p><code>-moz-outline-radius</code> is a convenient shortcut to set the four properties {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} and {{cssxref("-moz-outline-radius-bottomleft")}}.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* One value */
-moz-outline-radius: 25px;

/* Two values */
-moz-outline-radius: 25px 1em;

/* Three values */
-moz-outline-radius: 25px 1em 12%;

/* Four values */
-moz-outline-radius: 25px 1em 12% 4mm;

/* Global values */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;
</pre>

<h3 id="Values">Values</h3>

<div class="note">Elliptical outlines and <code>&lt;percentage&gt;</code> values follow the syntax described in {{cssxref("border-radius")}}.</div>

<p>One, two, three or four <code>&lt;outline-radius&gt;</code> values, represents one of:</p>

<dl>
 <dt>&lt;length&gt;</dt>
 <dd>See {{cssxref("")}} for possible values.</dd>
 <dt>&lt;percentage&gt;</dt>
 <dd>A {{cssxref("&lt;percentage&gt;")}}; see {{cssxref("border-radius")}} for details.</dd>
</dl>

<ul>
 <li>If a single value is set, it applies to all 4 corners.</li>
 <li>If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.</li>
 <li>If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.</li>
 <li>If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.</li>
</ul>

<h3 id="Formal_syntax">Formal syntax</h3>

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

<h2 id="Example">Example</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;The outline-style Property using <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;The outline-style Property using more complicated <code class="language-css"><span class="property token">-moz-outline-radius-xxx </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="Notes">Notes</h2>

<ul>
 <li><code>dotted</code> or <code>dashed</code> radiused corners are rendered as solid, {{bug("382721")}}</li>
 <li>Future versions of Gecko/Firefox may drop this property completely. See {{bug("593717")}}.</li>
</ul>

<h2 id="Specifications">Specifications</h2>

<p>{{WhyNoSpecStart}}This property it is not defined in any CSS standard.{{WhyNoSpecEnd}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</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>Feature</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>Basic support</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>