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
-Eigenschaft CSS rundet die Ecken des äußeren Randes eines Elements ab. Sie können einen einzelnen Radius festlegen, um kreisförmige Ecken zu erstellen, oder zwei Radien, um elliptische Ecken zu gestalten.
Probieren Sie es aus
Der Radius wirkt sich auf den gesamten background
aus, auch wenn das Element keinen Rand hat; die genaue Position des Zuschnitts wird durch die background-clip
-Eigenschaft definiert.
Die border-radius
-Eigenschaft gilt nicht für Tabellenelemente, wenn border-collapse
auf collapse
gesetzt ist.
Hinweis: Wie bei jeder Kurzform-Eigenschaft können einzelne Untereigenschaften nicht erben, wie in border-radius:0 0 inherit inherit
, was die vorhandenen Definitionen teilweise überschreiben würde. Stattdessen müssen die einzelnen Langform-Eigenschaften verwendet werden.
Bestandteile der Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* 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 oder 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 festzulegen, sodass Sie elliptische Ecken haben können.
Werte
radius |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand an jeder Ecke des Randes angibt. Es wird nur in der Ein-Wert-Syntax verwendet.
|
|
top-left-and-bottom-right |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand in den Ecken oben links und unten rechts der Box des Elements angibt. Es wird nur in der Zwei-Wert-Syntax verwendet.
|
|
top-right-and-bottom-left |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand in den Ecken oben rechts und unten links der Box des Elements angibt. Es wird nur in der Zwei- und Drei-Wert-Syntax verwendet.
|
|
top-left |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand in der Ecke oben links der Box des Elements angibt. Es wird nur in der Drei- und Vier-Wert-Syntax verwendet.
|
|
top-right |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand in der Ecke oben rechts der Box des Elements angibt. Es wird nur in der Vier-Wert-Syntax verwendet.
|
|
bottom-right |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand in der Ecke unten rechts der Box des Elements angibt. Es wird nur in der Drei- und Vier-Wert-Syntax verwendet.
|
|
bottom-left |
Ist ein <length> oder ein
<percentage> , der einen zu verwendenden Radius für den Rand in der Ecke unten links der Box des Elements angibt. Es wird nur in der Vier-Wert-Syntax verwendet.
|
<length>
-
Gibt die Größe des Kreisradius oder die Haupt- und Nebenachsen der Ellipse unter Verwendung von Längenwerten an. Negative Werte sind ungültig.
<percentage>
-
Gibt die Größe des Kreisradius oder die Haupt- und Nebenachsen der Ellipse unter Verwendung von 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.
Zum Beispiel:
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;
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
Initialer Wert | wie die jeweiligen Kurzschreibweisen: |
---|---|
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:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
Beispiele
Live-Beispiele
- Beispiel 1 : https://jsfiddle.net/Tripad/qnGKj/2/
- Beispiel 2 : https://jsfiddle.net/Tripad/qnGKj/3/
- Beispiel 3 : https://jsfiddle.net/Tripad/qnGKj/4/
- Beispiel 4 : https://jsfiddle.net/Tripad/qnGKj/5/
- Beispiel 5 : https://jsfiddle.net/Tripad/qnGKj/6/
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-radius |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Border-radius-bezogene 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