CSS border-top-left-radius-Eigenschaft
Die CSS-Eigenschaft border-top-left-radius bestimmt die Abrundung der oberen linken Ecke des Elements.
Die Eigenschaft border-top-left-radius ist eine der CSS3-Eigenschaften.
Die Ecke kann zu einem Kreis oder einer Ellipse abgerundet werden oder quadratisch bleiben, wenn kein Wert angegeben wird. Wenn Sie ein Hintergrundbild oder eine Farbe verwenden, wird es an die Randform zugeschnitten. Das Zuschneideverhalten wird durch die Eigenschaft background-clip gesteuert.
Die border-top-left-radius-Eigenschaft akzeptiert einen oder zwei Werte, die jeweils als <length> oder <percentage> angegeben werden. Wenn nur ein Wert verwendet wird, legt er sowohl den horizontalen als auch den vertikalen Radius der Ellipse fest. Bei zwei Werten legt der erste den horizontalen Radius und der zweite den vertikalen Radius fest. Prozentangaben für den horizontalen Radius beziehen sich auf die Breite des Elements, während Prozentangaben für den vertikalen Radius sich auf seine Höhe beziehen. Negative Werte sind ungültig.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbt | Nein |
| Animierbar | Ja. Der Radius des Randes ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderTopLeftRadius = "25px"; |
Syntax
Syntax der CSS border-top-left-radius-Eigenschaft
border-top-left-radius: length | % | initial | inherit;Hier ist ein Beispiel für border-top-left-radius, bei dem nur ein Wert verwendet wird. Wenn nur ein Wert verwendet wird, legt er sowohl den horizontalen als auch den vertikalen Radius der Ellipse fest.
Beispiel für die border-top-left-radius-Eigenschaft:
Beispiel der CSS border-top-left-radius-Eigenschaft mit nur einem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-top-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Ergebnis
Im folgenden Beispiel legt der erste Wert den horizontalen Radius fest und der zweite den vertikalen Radius.
Beispiel für die border-top-left-radius-Eigenschaft mit zwei Werten:
Beispiel der CSS border-top-left-radius-Eigenschaft mit zwei Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #ccc;
border: 4px solid #000000;
border-top-left-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Das folgende Beispiel verwendet Prozentwerte. Der erste Wert definiert den horizontalen Radius und der zweite den vertikalen Radius.
Beispiel für die border-top-left-radius-Eigenschaft mit dem "%" Wert:
Beispiel der CSS border-top-left-radius-Eigenschaft mit Prozentwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #eee;
border: 4px solid #000000;
border-top-left-radius: 50% 60%;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| length | Definiert die Abrundung der oberen linken Ecke. | Ausführen » |
| % | Definiert die Abrundung der oberen linken Ecke in Prozent. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Was bewirkt die 'border-top-left-radius'-Eigenschaft in CSS?