border-radius - CSS

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

Komponenten-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 spezifiziert:

ein, zwei, drei 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>: Bezeichnet die Größe des Kreisradius oder die Halb-Achsen der Ellipse unter Verwendung von Längenwerten. Negative Werte sind ungültig.
<percentage>: Bezeichnet die Größe des Kreisradius oder die Halb-Achsen der Ellipse unter Verwendung von Prozentwerten. 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;

Beschreibung

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

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

Hinweis: Wie bei jeder Kurzschreibweise können einzelne Untereigenschaften nicht vererbt werden, wie in border-radius:0 0 inherit inherit, welches vorhandene Definitionen teilweise überschreiben würde. Stattdessen müssen die einzelnen Langschreib-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-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()`;

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 angewandten Stile sind als Inhalts des Elements enthalten, sodass Sie die erforderlichen CSS-Deklarationen sehen können, 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 border-radius-Wert ungleich 0 auf eine Rechteck-Ecke angewendet wird, können Sie die Eigenschaft corner-shape (oder eine ihrer Lang- und Kurzschreibweisen) verwenden, um benutzerdefinierte Formen an dieser Ecke anzuwenden, wie etwa eine Schräge, Kerbe oder Squircle. Dieses Beispiel demonstriert die Verwendung von corner-shape.

HTML

Das Markup für dieses Beispiel enthält ein einzelnes <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 keine Eckform auf die Ecke oben links angewendet wird, da dort ein border-radius von 0 gesetzt ist.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

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>`, der einen Radius angibt, der für den Rand in jeder Ecke verwendet werden soll. Es wird nur in der Ein-Wert-Syntax verwendet.
top-left-and-bottom-right		Ist ein `<length>` oder ein `<percentage>`, der einen Radius angibt, der für den Rand in den Ecken oben links und unten rechts des Elementkastens verwendet wird. Es wird nur in der Zwei-Wert-Syntax verwendet.
top-right-and-bottom-left		Ist ein `<length>` oder ein `<percentage>`, der einen Radius angibt, der für den Rand in den Ecken oben rechts und unten links des Elementkastens verwendet wird. Es wird nur in der Zwei- und Drei-Wert-Syntax verwendet.
top-left		Ist ein `<length>` oder ein `<percentage>`, der einen Radius angibt, der für den Rand in der Ecke oben links des Elementkastens verwendet wird. Es wird nur in der Drei- und Vier-Wert-Syntax verwendet.
top-right		Ist ein `<length>` oder ein `<percentage>`, der einen Radius angibt, der für den Rand in der Ecke oben rechts des Elementkastens verwendet wird. Es wird nur in der Vier-Wert-Syntax verwendet.
bottom-right		Ist ein `<length>` oder ein `<percentage>`, der einen Radius angibt, der für den Rand in der Ecke unten rechts des Elementkastens verwendet wird. Es wird nur in der Drei- und Vier-Wert-Syntax verwendet.
bottom-left		Ist ein `<length>` oder ein `<percentage>`, der einen Radius angibt, der für den Rand in der Ecke unten links des Elementkastens verwendet wird. Es wird nur in der Vier-Wert-Syntax verwendet.