---
title: border-radius
slug: Web/CSS/border-radius
tags:
  - CSS
  - CSS Referenz
translation_of: Web/CSS/border-radius
---
<p>{{CSSRef}}</p>

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

<p>Die Eigenschaft <code>border-radius</code> kann verwendet werden, um <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> mit abgerundeten Ecken zu versehen. Der Radius wird auch auf <a href="/de/CSS/background" title="de/CSS/background">Hintergründe</a> und <a href="/de/CSS/box-shadow" title="De/CSS/-moz-box-shadow">Schatteneffekte</a> angewendet, selbst wenn das Element über keinen Rahmen verfügt.</p>

<p><code>border-radius</code> ist die Kurzform für die für Eigenschaften {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} und {{ Cssxref("border-bottom-left-radius") }}.</p>

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

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

<pre class="eval">border-radius: {{csssyntax("border-radius")}}

bzw.

border-radius: [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ]{1,4}
               [ / [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ]{1,4} ]?
</pre>

<h2 id="Werte">Werte</h2>

<p>Es werden bis zu vier Angaben akzeptiert und nach einem Slash ("<code>/</code>") können vier weitere Angaben folgen.</p>

<dl>
 <dt>&lt;Länge&gt;</dt>
 <dd>Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
 <dt>&lt;Prozentzahl&gt;</dt>
 <dd>Ab Gecko 2.0 (Firefox 4.0):<br>
 Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.<br>
 In vorherigen Gecko- &amp; Firefox-Versionen:<br>
 {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist auch dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.</dd>
 <dt>Ein Wert</dt>
 <dd>Gilt für alle vier Ecken.</dd>
 <dt>Zwei Werte</dt>
 <dd>Der erste Wert bestimmt die Ecken oben links und unten rechts, der zweite Wert legt die Ecken oben rechts und unten links fest.</dd>
 <dt>Drei Werte</dt>
 <dd>Der erste Wert bestimmt die Ecke oben links, der zweite Wert legt die Ecke für oben rechts und unten links zusammen fest und der dritte Wert bestimmt die Ecke unten rechts.</dd>
 <dt>Vier Werte</dt>
 <dd>Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben links, oben rechts, unten rechts, unten links.</dd>
 <dt>Slash ("/") Schreibweise</dt>
 <dd>Wenn weitere Werte nach einem Slash ("/") folgen, werden die Werte vor dem Slash verwendet, um den horizontalen Radius festzulegen, während die Werte nach dem Slash für vertikalen Radius benutzt werden. Wird der Slash weggelassen, werden die festgelegten Werte für horizontale und vertikale Radien verwendet.</dd>
</dl>

<p>Beispiel zur Slash-Notation:</p>

<pre class="brush: css">-moz-border-radius: 1em/5em;
     border-radius: 1em/5em;

/* ist gleichbedeutend zu: */

-moz-border-radius-topleft:      1em 5em;
-moz-border-radius-topright:     1em 5em;
-moz-border-radius-bottomright:  1em 5em;
-moz-border-radius-bottomleft:   1em 5em;
     border-top-left-radius:     1em 5em;
     border-top-right-radius:    1em 5em;
     border-bottom-right-radius: 1em 5em;
     border-bottom-left-radius:  1em 5em;
</pre>

<pre class="brush: css">-moz-border-radius: 4px 3px 6px / 2px 4px;
     border-radius: 4px 3px 6px / 2px 4px;

/* ist gleichbedeutend zu: */

-moz-border-radius-topleft:      4px 2px;
-moz-border-radius-topright:     3px 4px;
-moz-border-radius-bottomright:  6px 2px;
-moz-border-radius-bottomleft:   3px 4px;
     border-top-left-radius:     4px 2px;
     border-top-right-radius:    3px 4px;
     border-bottom-right-radius: 6px 2px;
     border-bottom-left-radius:  3px 4px;
</pre>

<div class="note"><strong>Hinweis: </strong>Elliptische Rahmen (Slash mit erweitertem border-radius Syntax) werden von Versionen vor Gecko 1.9.1 (Firefox 3.5) nicht unterstützt.</div>

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

<pre style="float: left; margin: 10px; border: solid 10px; border-radius: 0 50px 50px 0;">border: solid 10px;

  /* Der Rahmen ergibt ein 'D' */
  -moz-border-radius: 0 50px 50px 0;
       border-radius: 0 50px 50px 0;
</pre>

<pre style="float: left; margin: 10px; border: groove 1em red; -webkit-border-radius: 2em; border-radius: 2em;">    border: groove 1em red;

           -moz-border-radius: 2em;
        -webkit-border-radius: 2em;
                border-radius: 2em;
</pre>

<pre class="eval" style="float: left; margin: 10px; background: gold; border: ridge gold; -webkit-border-radius: 13em 3em; border-radius: 13em/3em;">
           background: gold;
           border: ridge gold;

             -moz-border-radius: 13em/3em;
          -webkit-border-radius: 13em 3em;
                  border-radius: 13em/3em;
</pre>

<pre style="float: left; border: none; margin: 10px; background: gold; border-radius: 40px 10px;">    background: gold;

       -moz-border-radius: 40px 10px;
            border-radius: 40px 10px;
</pre>

<pre style="float: left; border: none; margin: 10px; background: black; color: gray; border-radius: 50%;">background: black;
color: gray;
border-radius: 50%;
</pre>

<p style=""> </p>

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

<ul>
 <li>Gepunktete und gestrichelte Rahmenecken werden als durchgehende Linie gerendert. Siehe {{ bug("382721") }}.</li>
 <li><code>border-radius</code> wird nicht auf Tabellen angewendet, wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse</code></a> auf <code>collapse</code> gesetzt ist.</li>
 <li>Safari/WebKit behandelt mehrere mehrere Werte anders (siehe unten).</li>
</ul>

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

{{Compat("css.properties.border-radius")}}

<h2 id="Spezifikation">Spezifikation</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-radius" lang="en">CSS 3 Backgrounds and Borders #border-radius</a></li>
</ul>