CSS border-radius Eigenschaft

Die border-radius Eigenschaft wird verwendet, um abgerundete Ecken am äußeren Randbereich eines Elements zu erzeugen. Sie funktioniert unabhängig davon, ob das Element einen sichtbaren Rahmen hat, und beschneidet Hintergrund sowie Box-Schatten ebenfalls auf die abgerundete Form. Diese Seite behandelt die Kurzschreibweise, die Ein-bis-Vier-Werte-Regeln, Prozentwerte gegenüber Längeneinheiten, die elliptische Schrägstrich-Syntax und häufige Anwendungsfälle in der Praxis.

Die border-radius Eigenschaft ist eine der CSS3-Eigenschaften.

Diese Eigenschaft ist eine Kurzschreibweise für die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius, mit denen die vier Ecken eines Elements einzeln festgelegt werden. Die border-radius Eigenschaft kann jedoch alle vier Ecken gleichzeitig definieren. Sie kann einen bis vier Werte annehmen.

Werden vier Werte angegeben, gelten sie für die obere linke, obere rechte, untere rechte und untere linke Ecke. Wird der Wert für die untere linke Ecke weggelassen, übernimmt er den Wert der oberen rechten Ecke. Wird der Wert für die untere rechte Ecke weggelassen, übernimmt er den Wert der oberen linken Ecke. Werden nur zwei Werte angegeben, gilt der erste für die obere linke und untere rechte Ecke, der zweite für die obere rechte und untere linke Ecke. Wird nur ein Wert angegeben, gilt er für alle vier Ecken.

Die border-radius Eigenschaft wird wie folgt angegeben:

Ein, zwei, drei oder vier Längen- oder Prozentwerte, die einen einheitlichen Radius für die Ecken festlegen.
Optional gefolgt von einem Schrägstrich ( / ) und ein, zwei, drei oder vier Längen- oder Prozentwerten. Damit wird ein zusätzlicher Radius definiert, sodass elliptische Ecken möglich sind.

Das erste Set von Werten (1–4) definiert den horizontalen Radius für alle vier Ecken. Ein optionales zweites Set, eingeleitet durch einen Schrägstrich, definiert die vertikalen Radien für alle vier Ecken. Wird nur ein Set angegeben, gelten diese Werte gleichermaßen für den vertikalen und horizontalen Radius.

Bei Prozentwerten wird die eigene Größe des Elements herangezogen: Der horizontale Radius ist ein Prozentsatz der Breite des Elements, der vertikale Radius ein Prozentsatz seiner Höhe. Daher verwandelt border-radius: 50% ein Quadrat in einen perfekten Kreis, während der gleiche Wert bei einem Rechteck eine Ellipse ergibt.

Anfangswert	0
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbt	Nein
Animierbar	Ja. Jede der Einzeleigenschaften der Kurzschreibweise ist animierbar.
Version	CSS3
DOM-Syntax	`object.style.borderRadius = "20px";` (Hinweis: JavaScript verwendet camelCase `borderRadius`, im Gegensatz zum mit Bindestrich geschriebenen CSS-Eigenschaftsnamen.)

Syntax

Syntax der CSS border-radius Eigenschaft

border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;

Beispiel der border-radius Eigenschaft:

Beispiel der CSS border-radius Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        width: 50%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Ergebnis

Sieh ein Beispiel mit Prozent- und Pixelwerten:

Beispiel der border-radius Eigenschaft mit Prozent- und Pixelwerten:

Beispiel der CSS border-radius Eigenschaft mit Prozent- und Pixelwerten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with percent and pixel values</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Probier es selbst »

Ein Pixelwert liefert unabhängig von der Elementgröße stets denselben festen Eckenradius – das ist in der Regel das Gewünschte für Buttons, Karten und Eingabefelder. Ein Prozentwert skaliert mit dem Element, sodass border-radius: 50% bei einem quadratischen Element einen Kreis ergibt – ein gängiger Trick für Avatare und Badges.

Der border-radius kann auch für ein Element mit Hintergrundfarbe oder Hintergrundbild festgelegt werden.

Beispiel der border-radius Eigenschaft mit background-color und background-image:

Beispiel der CSS border-radius Eigenschaft mit Hintergrundfarbe und Hintergrundbild

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
        width: 250px;
        height: 200px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-img {
        width: 250px;
        height: 200px;
        margin-top: 20px;
        background-color: lightgray;
        background: url('https://api.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
        background-position: left top;
        background-repeat: repeat;
        border: 2px solid #1c87c9;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius example with background color</h1>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Probier es selbst »

Hinweis: In älteren Browsern werden Hintergrundbilder möglicherweise nicht an den abgerundeten Ecken beschnitten. Verwende background-clip: border-box;, um einheitliches Verhalten sicherzustellen.

Sehen wir uns nun ein Beispiel mit verschiedenen Elementen und unterschiedlichen border-radius Werten an, die die Form der Boxen beeinflussen.

Beispiel der border-radius Eigenschaft mit mehreren Werten:

Beispiel der CSS border-radius Eigenschaft mit verschiedenen Werten (%,px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        height: 150px;
        border: solid 3px #1c87c9;
        background: #1c87c9;
      }
      .radius_1 {
        border-radius: 25px;
      }
      .radius_2 {
        border-radius: 25% 10%;
      }
      .radius_3 {
        border-radius: 10% 30% 50% 70%;
      }
      .radius_4 {
        border-radius: 10% / 50%;
      }
      .radius_5 {
        border-radius: 10px 100px / 120px;
      }
      .radius_6 {
        border-radius: 25% 10%;
      }
      .radius_7 {
        border-radius: 50% 20% / 10% 40%;
      }
      .radius_8 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius examples</h1>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Probier es selbst »

Die Schrägstrich-Syntax (zum Beispiel border-radius: 10px 100px / 120px) trennt horizontale von vertikalen Radien – so lassen sich asymmetrische, elliptische Ecken statt einfacher Viertelkreise erzeugen.

Häufige Anwendungsfälle

Abgerundete Buttons und Karten: ein kleiner fester Wert wie border-radius: 6px weicht Ecken ab, ohne die Form zu verzerren.
Pillenförmige Buttons: ein großer Wert wie border-radius: 9999px rundet die kurzen Seiten vollständig zu einer Kapselform ab.
Kreise und Avatare: border-radius: 50% bei einem quadratischen Element (gleiche Breite und Höhe) ergibt einen perfekten Kreis.
Dekorative Blobs: vier unterschiedliche Prozentwerte, optional mit der /-Syntax, erzeugen organische, blattartige Formen.

Werte

Wert	Beschreibung	Ausprobieren
length	Legt die Abrundungsgröße der Ecken fest.	Ausprobieren »
%	Legt die Abrundungsgröße der Ecken in Prozent fest.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was bewirkt die CSS-Eigenschaft 'border-radius'?

Sie definiert den Radius des Seitenrahmens.Sie bestimmt die Hintergrundfarbe des Rahmens.Sie steuert die Krümmung der Rahmenecken eines Elements.Sie ermöglicht abgerundete Ecken an einem Element.