CSS border-bottom-left-radius-Eigenschaft
Die border-bottom-left-radius-Eigenschaft bestimmt die Abrundung der unteren linken Ecke des Elements.
Die border-bottom-left-radius-Eigenschaft ist eine der CSS3-Eigenschaften.
Wenn Sie keinen Wert angeben, bleibt die Ecke eckig. Bei Angabe eines Werts entsteht ein Viertel-Ellipsenbogen. Wenn Sie ein Hintergrundbild oder eine Farbe verwenden, wird es am Rand abgeschnitten. Der Abschneideprozess wird durch den Wert der background-clip-Eigenschaft definiert.
Die border-bottom-left-radius-Eigenschaft hat zwei Werte: Länge und Prozent. Wenn nur ein Wert angegeben wird, bestimmt er sowohl den horizontalen als auch den vertikalen Radius der Ellipse. Bei zwei Werten legt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius fest.
Prozentangaben für den horizontalen Radius beziehen sich auf die Breite der Box, Prozentangaben für den vertikalen Radius auf die Höhe der Box. Negative Werte sind nicht erlaubt.
Wenn die Kurzschreibweise border-radius nach border-bottom-left-radius angewendet wird, überschreibt sie den Wert der einzelnen Eigenschaft.
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | 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 für die border-bottom-left-radius-Eigenschaft:
Beispiel für die 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 für die border-bottom-left-radius-Eigenschaft mit zwei Werten:
Beispiel für die 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>Beispiel für die border-bottom-left-radius-Eigenschaft mit dem Wert „Prozent“:
Beispiel für die CSS border-bottom-left-radius-Eigenschaft mit %-Wert (Prozent)
<!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 | Ausführen |
|---|---|---|
| length | Gibt die Abrundung der unteren linken Ecke in „px“ an. | Ausführen » |
| % | Gibt die Abrundung der unteren linken Ecke in Prozent an. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Welche Funktion hat die 'border-bottom-left-radius'-Eigenschaft in CSS?