---
title: '-moz-outline-radius'
slug: Web/CSS/-moz-outline-radius
tags:
  - CSS
  - CSS Referenz
  - NeedsLiveSample
  - Non-standard
translation_of: Web/CSS/-moz-outline-radius
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>In Mozilla Anwendungen wie Firefox kann die <code>-moz-outline-radius</code> CSS Eigenschaft dazu verwendet werden, um Umrissen runde Ecken zu verleihen. Ein {{cssxref("outline", "Umriss")}} ist eine Linie, die um Elemente gezeichnet wird, außerhalb des Randes, um das Element hervorzuheben.</p>

<p><code>-moz-outline-radius</code> ist eine praktische Kurzschreibweise, um die vier Eigenschaften {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} und {{cssxref("-moz-outline-radius-bottomleft")}} zu setzen.</p>

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

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

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

/* Zwei Werte */
-moz-outline-radius: 25px 1em;

/* Drei Werte */
-moz-outline-radius: 25px 1em 12%;

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

/* Globale Werte */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;
</pre>

<h3 id="Werte">Werte</h3>

<div class="note">Elliptische Umrisse und <code>&lt;percentage&gt;</code> Werte folgen der in {{cssxref("border-radius")}} beschriebenen Syntax.</div>

<p>Ein, zwei, drei oder vier <code>&lt;outline-radius&gt;</code> Werte, die jeweils einem dieser Werte entsprechen:</p>

<dl>
 <dt>&lt;length&gt;</dt>
 <dd>Siehe {{cssxref("&lt;length&gt;")}} für mögliche Werte.</dd>
 <dt>&lt;percentage&gt;</dt>
 <dd>Eine {{cssxref("&lt;percentage&gt;")}}; siehe {{cssxref("border-radius")}} für Details.</dd>
</dl>

<ul>
 <li>Falls ein einzelner Wert gesetzt ist, wird er auf alle 4 Ecken angewendet.</li>
 <li>Falls zwei Werte gesetzt sind, bezieht sich der erste auf die linke obere und die rechte untere Ecke und der zweite auf die rechte obere und die linke untere Ecke.</li>
 <li>Falls drei Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere und die linke untere Ecke und der dritte auf die rechte untere Ecke.</li>
 <li>Falls vier Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere Ecke, der dritte auf die rechte untere Ecke und der vierte auf die linke untere Ecke.</li>
</ul>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush:css">outline: dotted red;

-moz-outline-radius: 12% 1em 25px;
/* ist gleichbedeutend mit: */
-moz-outline-radius-topleft: 12%;
-moz-outline-radius-topright: 1em;
-moz-outline-radius-bottomright: 35px;
-moz-outline-radius-bottomleft: 1em;</pre>

<h2 id="Hinweise">Hinweise</h2>

<ul>
 <li><code>dotted</code> oder <code>dashed</code> abgerundete Ecken werden durchgehend dargestellt, {{bug("382721")}}.</li>
 <li>Zukünftige Versionen von Gecko/Firefox entfernen möglicherweise diese Eigenschaft vollständig. Siehe {{bug("593717")}}.</li>
</ul>

<h2 id="Spezifikationen">Spezifikationen</h2>

<p>Diese Eigenschaft ist in keinem CSS Standard definiert.</p>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</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>Merkmal</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>Grundlegende Unterstützung</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>