Die CSS-Eigenschaft border-top-right-radius definiert die runde Form der rechten oberen Ecke des Elements. Es gibt drei Arten von Rundungen. Es kann ein Kreis oder eine Ellipse sein, oder der Wert ist 0, die Ecke ist ein Quadrat. 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-right-radius hat zwei Werte: length and percentage. Die Eigenschaft border-top-right-radius gibt die horizontalen und vertikalen Radien an, die die abgerundete rechte obere Ecke für einen Randbereich definieren.
Wenn nur ein Wert angegeben wird, gibt dieser Wert sowohl den horizontalen als auch den vertikalen Radius der Ellipse an. Wenn zwei Werte angegeben sind, stellt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius ein.
Die Prozentsätze für die horizontalen Radien beziehen sich auf die Breite der Box, die Prozentsätze für den vertikalen Radius auf die Höhe der Box. Negative Werte sind nicht erlaubt.
| Initial Value | 0 |
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Top right border is animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.borderTopRightRadius = "25px"; |
Syntax
border-top-right-radius: length | % | initial | inherit;Versuchen wir ein Beispiel, wo nur ein Wert verwendet wird. Es definiert sowohl den oberen als auch den rechten Rand der Ellipse.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-right-radius.</h2>
<div></div>
</body>
</html>Ein weiteres Beispiel, wo zwei Werte angegeben werden. Die erste definiert den oberen Rand der Ellipse, die zweite definiert den rechten Rand der Ellipse.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-right-radius.</h2>
<div></div>
</body>
</html>Betrachten Sie ein weiteres Beispiel mit Prozentsätzen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-right-radius.</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| length | Es definiert die runde Form der linken oberen Ecke. |
| % | Es definiert die runde Form der linken oberen Ecke in %. |
| 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
