CSS-Eigenschaft `border-radius`

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

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;
}

Bestandteilige Eigenschaften

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 border-radius Eigenschaft wird angegeben als:

ein, zwei, drei oder vier <length>- oder <percentage>-Werte. Dies wird verwendet, um einen einzigen Radius für die Ecken festzulegen.
gefolgt optional 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 einer hellgrauen Umrandung. Alle 4 Ecken sind abgerundet.

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

<length>: Gibt die Größe des Kreisradius oder der Haupt- und Nebenachsen der Ellipse unter Verwendung von Längenangaben an. Negative Werte sind ungültig.
<percentage>: Gibt die Größe des Kreisradius oder der Haupt- und Nebenachsen der Ellipse unter Verwendung von Prozentangaben an. Prozentsätze für die horizontale Achse beziehen sich auf die Breite des Rahmens; Prozentsätze für die vertikale Achse beziehen sich auf die Höhe des Rahmens. 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;

Beschreibung

Der Radius wird auf den gesamten background angewendet, auch wenn das Element keinen Rand hat; die genaue Position des Beschnitts wird durch die background-clip Eigenschaft definiert.

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

Hinweis: Wie bei jeder Kurzform-Eigenschaft können einzelne Untereigenschaften nicht direkt vererbt werden, wie z.B. bei border-radius:0 0 inherit inherit, was bestehende Definitionen teilweise überschreiben würde. Stattdessen müssen die einzelnen Langform-Eigenschaften verwendet werden.

Formale 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-top-left-radius`: zwei absolute `<length>` oder `<percentage>` `border-top-right-radius`: zwei absolute `<length>` oder `<percentage>` `border-bottom-right-radius`: zwei absolute `<length>` oder `<percentage>` `border-bottom-left-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()`;

Formale 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 von 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;
}

Verwendung von `corner-shape` mit `border-radius`

Wenn ein nicht-0 border-radius Wert auf eine Box-Ecke angewendet wird, können Sie die corner-shape Eigenschaft (oder eine ihrer Lang- und Kurzformen) verwenden, um benutzerdefinierte Formen auf diese Ecke anzuwenden, wie z.B. eine Abschrägung, Einkerbung oder Squircle. Dieses Beispiel demonstriert die Verwendung von corner-shape.

HTML

Das Markup für dieses Beispiel enthält ein einziges <div>-Element.

html

<div></div>

CSS

Wir geben der Box einige grundlegende Stile, die wir der Kürze halber ausgeblendet haben. Wir wenden auch einen box-shadow, einen border-radius von 0 20% 50px 30% und eine corner-shape von superellipse(0.5) bevel notch squircle an.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 0 20% 50px 30%;
  corner-shape: superellipse(0.5) bevel notch squircle;
}

Ergebnis

Das gerenderte Ergebnis sieht folgendermaßen aus:

Beachten Sie, dass auf die obere linke Ecke keine Eckform angewendet wird, da dort ein border-radius von 0 gesetzt ist.

Spezifikationen

Spezifikation
CSS Backgrounds and Borders Module Level 3 # propdef-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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

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

CSS-Eigenschaft border-radius

HTML

CSS

Ergebnis

Help improve MDN

CSS-Eigenschaft `border-radius`