border-radius

Sie können jedem Element „abgerundete Ecken“ geben, indem Sie border-radius über CSS anwenden. Sie werden dies nur bemerken, wenn eine Farbänderung beteiligt ist. Zum Beispiel, wenn das Element eine Hintergrundfarbe oder einen Rand hat, der sich von dem Element unterscheidet, über dem es sich befindet.

.element {
  border-radius: 10px;
}

Bestandteileigenschaften

border-radius ist das, was wir eine „Kurzschreibweise“ (shorthand) nennen. Das bedeutet, dass es die folgenden einzelnen Eigenschaften in einer einzigen Deklaration festlegt

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Logische Eigenschaften

Diese werden als „physikalische“ Eigenschaften bezeichnet, da sie den Radius entsprechend der physischen Position der Ecke festlegen (z. B. oben links). Aber border-radius ist Teil der Spezifikation für Logische Eigenschaften und Werte, was bedeutet, dass es logische Entsprechungen der physischen Eigenschaften hat.

Physikalische Eigenschaft	Logische Eigenschaft
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius

Es ist anfangs etwas verwirrend, aber die Reihenfolge ist wirklich wichtig, besonders wenn man mit border-radius als Kurzschreibweise arbeitet. Die Reihenfolge ist wie folgt, wobei die erste Richtung sich auf die Blockrichtung und die zweite Richtung sich auf die Inline-Richtung bezieht.

Physikalische Eigenschaft	Logische Eigenschaft
oben-links	start-start
oben-rechts	start-end
unten-links	end-start
unten-rechts	end-end

Syntax

border-radius: <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

• Anfangswert: 0
• Gilt für: alle Elemente
• Vererbt: nein
• Berechnete Werte: Paar von berechneten <length-percentage> Werten
• Animation: nach berechnetem Wert

Die Eigenschaft border-radius akzeptiert zwischen einem und vier Längen- oder Prozentwerten, wobei ein Wert den Radius für alle vier Ecken auf einmal festlegt, während vier jeden einzelnen Ecke festlegen.

/* Single value */
/* Sets all four corners */
border-radius: 10px;

/* Two values /*
/* top-left and bottom-right top-right and bottom-left  */
border-radius: 25% 0;

/* Three values */
/* top-left top-right/bottom-left bottom-right */
border-radius: 1rem 1.5rem 1.25rem;

/* Four values */
/* top-left top-right bottom-right bottom-left */
border-radius: 8px 10px 12px 14px;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

Wenn wir also einen anderen Radius für die obere linke und die untere rechte Ecke festlegen möchten, aber für die obere rechte und die untere linke Ecke denselben Radius verwenden möchten, können wir die Drei-Wert-Syntax verwenden.

.element {
  /* top-left top-right/bottom-left bottom-right */
  border-radius: 5px 20px 5px;
  background: #BADA55;
}

Elliptische Rundung (/)

Sie können auch die Radien angeben, mit denen die Ecke gerundet wird. Mit anderen Worten, die Rundung muss nicht perfekt kreisförmig sein, sie kann elliptisch sein. Dies geschieht mit einem Schrägstrich (/) zwischen zwei Werten.

.element {
  border-radius: 10px / 30px; /* horizontal radius / vertical radius */
}

Hinweis: Firefox unterstützt elliptische Ränder erst ab Version 3.5+. Ältere WebKit-Browser (z. B. Safari 4 und älter) behandeln 40px 10px fälschlicherweise genauso wie 40px / 10px.

Werte

Die Eigenschaft border-radius kann jede gültige CSS-Längeneinheit akzeptieren. Das bedeutet, dass alles von px, rem, em, ch, vh, vw und einer ganzen Reihe anderer Einheiten zulässig ist.

Sie können den Wert von border-radius in Prozent angeben. Dies ist besonders nützlich, um eine kreisrunde oder elliptische Form zu erstellen, kann aber jederzeit verwendet werden, wenn Sie möchten, dass border-radius direkt mit der Breite des Elements korreliert.

.element {
  border-radius: 50%;
  width: 200px;
}

Hinweis: In Safari werden Prozentwerte für border-radius nur ab Version 5.1+ unterstützt. In Opera nur ab Version 11.5+.

Haken und Ösen (Gotchas)

Es gibt ein paar Dinge, auf die Sie bei der Arbeit mit der Eigenschaft border-radius achten sollten.

Abgeschnittene Hintergrundbilder

Wenn das Element ein Hintergrundbild hat, wird es an der abgerundeten Ecke natürlich abgeschnitten.

.element {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */
}

Hintergrundfarbbereich (Background color bleed)

Manchmal kann man sehen, wie eine background-color außerhalb eines Rahmens „austritt“, wenn border-radius vorhanden ist (hier ist ein perfektes Beispiel). Um dies zu verhindern, verwenden Sie die CSS-Eigenschaft background-clip.

.element {
  border-radius: 10px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
}

Überlappende Border-Radien

Jay Sitter hat abgedeckt, was passiert, wenn der Wert eines Eckradius so groß ist, dass er den Radius eines anderen Eckradius überlappt. Wie in diesem Beispiel, wo wir auf der rechten Seite eine „Pillen“-Form mit geringerer Rundung links anstreben.

Wir setzen einen Radius von 40px auf die obere linke und untere linke Ecke. Warum sind sie dann so eckig? Das liegt daran, dass der Wert 999em der beiden anderen Ecken sie überdeckt. Jay geht tief in die Mathematik dahinter ein und wie man verhindert, dass es passiert. Es lohnt sich also, seinen Artikel für mehr Kontext zu lesen.

Demo

Browser-Unterstützung

Es ist jetzt unnötig, aber für die absolut beste Browserunterstützung könnten Sie die Eigenschaft mit -webkit- und -moz- präfixieren, um sicherzustellen, dass ältere Browser mitmachen können.

.element {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

Beachten Sie die Reihenfolge dieser Eigenschaften: Zuerst werden die Vendor-Präfixe aufgeführt und dann die nicht präfixierte „Spec“-Version. Das ist die richtige Vorgehensweise. Border-Radius ist ein besonders gutes Beispiel dafür, warum wir es so machen. In einer etwas komplizierteren Version der Verwendung von border-radius (bei der Sie zwei Werte statt einem übergeben), würde das ältere -webkit- Vendor-Präfix etwas völlig anderes tun als die „Spec“-Version. Wenn wir also blind die gleichen Werte für alle drei Eigenschaften kopieren und einfügen, können wir browserübergreifend unterschiedliche Ergebnisse erzielen. Für die meiste Konsistenz auf lange Sicht ist es am besten, die „Spec“-Version zuletzt aufzuführen.

Heutzutage ist es ziemlich realistisch, Präfixe wegzulassen und einfach nur vanilla border-radius zu verwenden, wie hier besprochen.

Hier ist jede einzelne Eigenschaft, mit Vendor-Präfixen

.element {
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;
}

Jeder dieser Werte kann auch ein leerzeichengetrennter Wert sein, wie z. B. 5px 10px, was sich genauso verhält wie ein schrägstrichgetrennter Wert in der Kurzschreibweise (<horizontal-radius> [Leerzeichen] <vertical-radius>).

Verwandte Tricks!

Verwandt