CSS border-bottom-left-radius Eigenschaft
CSS border-bottom-left-radius rundet die untere linke Ecke eines Elements. Syntax, Werte und Beispiele.
Die Eigenschaft border-bottom-left-radius legt die Abrundung der unteren linken Ecke eines Elements fest.
Die Eigenschaft border-bottom-left-radius ist eine der CSS3-Eigenschaften.
Wenn kein Wert angegeben wird, bleibt die Ecke eckig. Wird ein Wert angegeben, entsteht ein Viertelellipsenbogen. Wenn ein Hintergrundbild oder eine Farbe verwendet wird, wird es an der Rahmenlinie abgeschnitten. Der Prozess des Abschneidens wird durch den Wert der Eigenschaft background-clip definiert.
Die Eigenschaft border-bottom-left-radius hat zwei Werte: Länge und Prozentsatz. Wird nur ein Wert angegeben, legt er sowohl den horizontalen als auch den vertikalen Radius der Ellipse fest. Werden zwei Werte angegeben, setzt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius.
Prozentwerte für den horizontalen Radius beziehen sich auf die Breite des Rahmens, Prozentwerte für den vertikalen Radius beziehen sich auf die Höhe des Rahmens. Negative Werte sind nicht erlaubt.
Wenn die Kurzschreibweise border-radius nach border-bottom-left-radius angewendet wird, überschreibt sie den Wert der einzelnen Eigenschaft. Aus diesem Grund sollten einzelne Ecken nach einer border-radius-Kurzschreibweise deklariert werden. Die Eigenschaft border-bottom-left-radius ist besonders nützlich, wenn nur eine Ecke eines Elements abgerundet werden soll – zum Beispiel bei einer Chat-Blase, einer Karte mit einer einzigen abgerundeten Ecke oder einer benutzerdefinierten Schaltfläche – während die anderen drei Ecken eckig bleiben.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der Radius der unteren linken Ecke ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderBottomLeftRadius = "35px"; |
Syntax
Syntax der CSS border-bottom-left-radius Eigenschaft
border-bottom-left-radius: length| % | initial | inherit;Beispiel der border-bottom-left-radius Eigenschaft:
Beispiel der CSS border-bottom-left-radius Eigenschaft mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Ergebnis
Beispiel der border-bottom-left-radius Eigenschaft mit zwei Werten:
Beispiel der CSS border-bottom-left-radius Eigenschaft mit zwei Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Hier ist 30px der horizontale Radius und 15px der vertikale Radius, was eine elliptische (keine kreisförmige) Ecke ergibt, die breiter als hoch ist.
Beispiel der border-bottom-left-radius Eigenschaft mit dem Wert "Prozentsatz":
Beispiel der CSS border-bottom-left-radius Eigenschaft mit %(Prozentsatz)-Wert
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| length | Legt die Abrundung der unteren linken Ecke in "px" fest. | Ausprobieren » |
| % | Legt die Abrundung der unteren linken Ecke als Prozentwert fest. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Browser-Unterstützung
Die Eigenschaft border-bottom-left-radius wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und Opera. Heutzutage sind keine Vendor-Präfixe mehr erforderlich.
Verwandte Eigenschaften
border-bottom-left-radius steuert eine einzelne Ecke. Um andere oder alle Ecken gleichzeitig abzurunden, können folgende verwandte Eigenschaften verwendet werden:
- border-radius — Kurzschreibweise, die alle vier Ecken in einer Deklaration festlegt.
- border-bottom-right-radius — rundet die untere rechte Ecke ab.
- border-top-left-radius — rundet die obere linke Ecke ab.
- border-top-right-radius — rundet die obere rechte Ecke ab.