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 ⁨Juli 2015⁩.

Die border-radius CSS-Eigenschaft rundet die Ecken der Außenkante eines Elements ab. Sie können einen einzelnen Radius festlegen, um runde Ecken zu erzeugen, 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 wird auf den gesamten background angewendet, selbst wenn das Element keinen Rand hat; die genaue Position der Ausblendung wird durch die Eigenschaft background-clip definiert.

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

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

Konstituierende Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 border-radius-Eigenschaft wird wie folgt angegeben:

Ein Wert, zwei Werte, drei Werte oder vier <length>- oder <percentage>-Werte. Dies wird verwendet, um einen einzigen 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 festzulegen, sodass Sie elliptische Ecken haben können.

Werte

Ein hellblaues Rechteck mit einem hellgrauen Rand. Alle 4 Ecken sind abgerundet.

Ein hellblaues Rechteck mit einem hellgrauen Rand. Die 2 Ecken oben links und unten rechts sind abgerundet.

<length>: Gibt die Größe des Kreisradius oder der semi-major und semi-minor Achsen der Ellipse mit Längenwerten an. Negative Werte sind ungültig.
<percentage>: Gibt die Größe des Kreisradius oder der semi-major und semi-minor Achsen der Ellipse mit Prozentwerten an. Prozentsätze für die horizontale Achse beziehen sich auf die Breite des Kastens; Prozentsätze für die vertikale Achse beziehen sich auf die Höhe des Kastens. Negative Werte sind ungültig.

Zum Beispiel:

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;

Formelle Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Anwendbar auf	alle 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`.
Vererbt	Nein
Prozentwerte	bezieht sich auf die Größe der Border-Box
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-bottom-left-radius`: zwei absolute `<length>` oder `<percentage>` `border-bottom-right-radius`: zwei absolute `<length>` oder `<percentage>` `border-top-left-radius`: zwei absolute `<length>` oder `<percentage>` `border-top-right-radius`: zwei absolute `<length>` oder `<percentage>`
Animationstyp	wie die jeweiligen Kurzschreibweisen: `border-top-left-radius`: Längenangabe, Prozentsatz oder `calc()`; `border-top-right-radius`: Längenangabe, Prozentsatz oder `calc()`; `border-bottom-right-radius`: Längenangabe, Prozentsatz oder `calc()`; `border-bottom-left-radius`: Längenangabe, Prozentsatz oder `calc()`;

Formelle Syntax

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

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

Beispiele

Vergleich von Rahmenstilen

Das folgende Beispiel enthält sieben <pre>-Elemente, die jeweils Kombinationen aus border- und border-radius-Stilen demonstrieren. Die auf jedes <pre>-Element angewendeten Stile sind als Inhalt des Elements enthalten, sodass Sie die CSS-Deklarationen sehen können, die erforderlich sind, um den zugehörigen Rahmenstil zu erstellen:

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 50px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Mit border-radius verwandte CSS-Eigenschaften: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

radius		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der an allen Ecken des Rahmens verwendet wird. Es wird nur in der Ein-Wert-Syntax verwendet.
top-left-and-bottom-right		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der für den Rahmen in den Ecken oben links und unten rechts des Box-Elements verwendet wird. Es wird nur in der Zwei-Werte-Syntax verwendet.
top-right-and-bottom-left		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der für den Rahmen in den Ecken oben rechts und unten links des Box-Elements verwendet wird. Es wird nur in der Zwei- und Drei-Werte-Syntax verwendet.
top-left		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der für den Rahmen in der Ecke oben links des Box-Elements verwendet wird. Es wird nur in der Drei- und Vier-Werte-Syntax verwendet.
top-right		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der für den Rahmen in der Ecke oben rechts des Box-Elements verwendet wird. Es wird nur in der Vier-Werte-Syntax verwendet.
bottom-right		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der für den Rahmen in der Ecke unten rechts des Box-Elements verwendet wird. Es wird nur in der Drei- und Vier-Werte-Syntax verwendet.
bottom-left		Ist ein `<length>` oder ein `<percentage>` und gibt einen Radius an, der für den Rahmen in der Ecke unten links des Box-Elements verwendet wird. Es wird nur in der Vier-Werte-Syntax verwendet.