border-bottom-left-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-bottom-left-radius
CSS Eigenschaft rundet die untere linke Ecke eines Elements ab, indem sie den Radius (oder den Radius der Haupt- und Nebenachse) der Ellipse angibt, die die Krümmung der Ecke definiert.
Probieren Sie es aus
Die Abrundung kann ein Kreis oder eine Ellipse sein, oder wenn einer der Werte 0
ist, wird keine Abrundung vorgenommen und die Ecke bleibt eckig.
Ein Hintergrund, sei es ein Bild oder eine Farbe, wird an der Grenze abgeschnitten, selbst bei einer abgerundeten; der genaue Ort der Abschneidung wird durch den Wert der background-clip
Eigenschaft definiert.
Hinweis: Wenn der Wert dieser Eigenschaft nicht in einer border-radius
Kurzschreibweise gesetzt ist, die nach der border-bottom-left-radius
CSS-Eigenschaft auf das Element angewendet wird, wird der Wert dieser Eigenschaft durch die Kurzschreibweise auf den Ausgangswert zurückgesetzt.
Syntax
/* the corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;
/* Percentage values */
/* circle if box is a square or ellipse if box is a rectangle */
border-bottom-left-radius: 20%;
/* same as above: 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 20%;
/* 20% of horizontal(width) and 10% of vertical(height) */
border-bottom-left-radius: 20% 10%;
/* the corner is an ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;
/* Global values */
border-bottom-left-radius: inherit;
border-bottom-left-radius: initial;
border-bottom-left-radius: revert;
border-bottom-left-radius: revert-layer;
border-bottom-left-radius: unset;
Mit einem Wert:
- Der Wert ist eine
<length>
oder ein<percentage>
und bezeichnet den Radius des Kreises, der für die Grenze in dieser Ecke verwendet wird.
Mit zwei Werten:
- Der erste Wert ist eine
<length>
oder ein<percentage>
und bezeichnet die horizontale Hauptachse der Ellipse, die für die Grenze in dieser Ecke verwendet wird. - Der zweite Wert ist eine
<length>
oder ein<percentage>
und bezeichnet die vertikale Hauptachse der Ellipse, die für die Grenze in dieser Ecke verwendet wird.
Werte
<length-percentage>
-
Bezeichnet die Größe des Kreisesradius oder der Haupt- und Nebenachsen der Ellipse. Als absolute Länge kann er in jeder Einheit ausgedrückt werden, die vom CSS
<length>
Datentyp erlaubt ist. 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.
Formale Definition
Initialer Wert | 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 | zwei absolute length oder percentage |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Formale Syntax
border-bottom-left-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Beispiele
Bogen eines Kreises
Ein einzelner <length>
Wert erzeugt einen Bogen eines Kreises.
div {
border-bottom-left-radius: 40px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Bogen einer Ellipse
Zwei verschiedene <length>
Werte erzeugen einen Bogen einer Ellipse.
div {
border-bottom-left-radius: 40px 20px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Quadratförmiges Element mit Prozentsatzradius
Ein quadratförmiges Element mit einem einzelnen <percentage>
Wert erzeugt einen Bogen eines Kreises.
div {
border-bottom-left-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
Nicht-quadratförmiges Element mit Prozentsatzradius
Ein nicht-quadratförmiges Element mit einem einzelnen <percentage>
Wert erzeugt einen Bogen einer Ellipse.
div {
border-bottom-left-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 200px;
height: 100px;
}
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
Kurzschreibweiseborder-top-right-radius
,border-bottom-right-radius
, undborder-top-left-radius