border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-radius CSS Eigenschaft rundet die Ecken des äußeren Rahmenrandes eines Elements ab. Sie können einen einzelnen Radius festlegen, um kreisförmige Ecken zu erstellen, oder zwei Radien, um elliptische Ecken zu erzeugen.

Probieren Sie es aus

border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 30% 50% 70%;
border-radius: 10% / 50%;
border-radius: 10px 100px / 120px;
border-radius: 50% 20% / 10% 40%;
<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Der Radius gilt für den gesamten background, selbst wenn das Element keinen Rahmen hat; die genaue Position des Ausschnitts wird durch die Eigenschaft background-clip definiert.

Die Eigenschaft border-radius gilt nicht für Tabellenelemente, wenn border-collapse auf collapse gesetzt ist.

Hinweis: Wie bei jeder Kurzschreibweise können einzelne Untereigenschaften nicht erben, wie in border-radius:0 0 inherit inherit, was bestehende Definitionen teilweise überschreiben würde. Stattdessen müssen die einzelnen Langformen verwendet werden.

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

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

Die Eigenschaft border-radius wird wie folgt angegeben:

  • ein, zwei, drei oder vier <length> oder <percentage> Werte. Dies wird verwendet, um einen einzelnen Radius für die Ecken festzulegen.
  • optional gefolgt von "/" und einem, zwei, drei oder vier <length> oder <percentage> Werten. Dies wird verwendet, um einen zusätzlichen Radius einzustellen, sodass Sie elliptische Ecken haben können.

Werte

radius Ein hellblaues Rechteck mit einem hellgrauen Rand. Alle 4 Ecken sind abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in jeder Ecke des Rahmens verwendet werden soll. Es wird nur in der Ein-Wert-Syntax verwendet.
top-left-and-bottom-right Ein hellblaues Rechteck mit einem hellgrauen Rand. Die 2 Ecken oben links und unten rechts sind abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in den oben links und unten rechts Ecken des Elements verwendet werden soll. Es wird nur in der Zwei-Werte-Syntax verwendet.
top-right-and-bottom-left Ein hellblaues Rechteck mit einem hellgrauen Rand. Die 2 Ecken oben rechts und unten links sind abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in den oben rechts und unten links Ecken des Elements verwendet werden soll. Es wird nur in der Zwei- und Drei-Werte-Syntax verwendet.
top-left Ein hellblaues Rechteck mit einem hellgrauen Rand. Die Ecke oben links ist abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in der oben linken Ecke des Elements verwendet werden soll. Es wird nur in der Drei- und Vier-Werte-Syntax verwendet.
top-right Ein hellblaues Rechteck mit einem hellgrauen Rand. Die Ecke oben rechts ist abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in der oben rechten Ecke des Elements verwendet werden soll. Es wird nur in der Vier-Werte-Syntax verwendet.
bottom-right Ein hellblaues Rechteck mit einem hellgrauen Rand. Die Ecke unten rechts ist abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in der unten rechten Ecke des Elements verwendet werden soll. Es wird nur in der Drei- und Vier-Werte-Syntax verwendet.
bottom-left Ein hellblaues Rechteck mit einem hellgrauen Rand. Die Ecke unten links ist abgerundet. Ist ein <length> oder ein <percentage>, das einen Radius angibt, der für den Rahmen in der unten linken Ecke des Elements verwendet werden soll. Es wird nur in der Vier-Werte-Syntax verwendet.
<length>

Gibt die Größe des Kreisradius oder der Haupt- und Nebenachsen der Ellipse mit Längenwerten an. Negative Werte sind ungültig.

<percentage>

Gibt die Größe des Kreisradius oder der Haupt- und Nebenachsen der Ellipse mit Prozentwerten an. Prozentsätze für die horizontale Achse beziehen sich auf die Breite der Box; Prozentsätze für die vertikale Achse beziehen sich auf die Höhe der Box. Negative Werte sind ungültig.

Beispielsweise:

css
border-radius: 1em/5em;

/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
css
border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente; aber User Agents sind nicht gezwungen dies auf table und inline-table Elemente anzuwenden, falls border-collapse collapse ist. Das Verhalten bei internen Tabellenelementen ist momentan undefiniert.. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe der Border-Box
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

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

<length-percentage> =
<length> |
<percentage>

Beispiele

Live-Beispiele

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# border-radius

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch