Die CSS-Eigenschaft border-top-left-radius definiert die Rundung der linken oberen Ecke des Elements. Es gibt drei Arten von Rundungen. Es kann ein Kreis oder eine Ellipse sein, oder, wenn es kein Wert verwendet wird, ist die Ecke quadratisch. Wenn Sie ein Hintergrundbild oder eine Hintergrundfarbe verwenden, wird es am Rand abgeschnitten. Der Prozess des Clippings wird durch den Wert der Eigenschaft background-clip definiert.
Die CSS-Eigenschaft border-top-left-radius wird durch zwei Werte definiert: length und percentage. Wenn nur ein Wert verwendet wird, gibt dieser Wert sowohl horizontale als auch vertikale Radien der Ellipse an. Wenn Sie zwei Werte verwenden, setzt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius.
Die Prozentsätze für den horizontalen Radius beziehen sich auf die Breite der Box, die Prozentsätze für den vertikalen Radius auf die Höhe der Box. Negative Werte sind ungültig.
| Anfangswert | 0 |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Der Radius des Randes ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.borderTopLeftRadius = "25px"; |
Syntax
border-top-left-radius: length | % | initial | inherit;Hier ist ein Beispiel für border-top-left-radius , wo nur ein Wert verwendet wird. Wenn Sie nur einen Wert angeben, gibt dieser Wert sowohl den oberen als auch den linken Rand der Ellipse an.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-top-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-left-radius.</h2>
<div></div>
</body>
</html>Ein weiteres Beispiel mit zwei Werten. Der erste Wert ist für den oberen Rand und der zweite für den linken Rand.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div{
height: 40px;
background: #ccc;
border: 4px solid #000000;
border-top-left-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-left-radius.</h2>
<div></div>
</body>
</html>Hier ist die Form der Box in Prozent definiert. Auch hier definiert der erste Wert die horizontalen Radien der Ellipse, der zweite Wert die vertikalen Radien der Ellipse.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div{
height: 40px;
background: #eee;
border: 4px solid #000000;
border-top-left-radius: 50% 60%;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-left-radius.</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| length | Es definiert die Rundung der linken oberen Ecke. |
| % | Es definiert die Rundung der linken oberen Ecke in Prozent. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von seinem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 4.0+ | 4.0+ | 5.0+ | 10.5+ |
Übe dein Wissen
