CSS border-top-right-radius Eigenschaft
Die CSS-Eigenschaft border-top-right-radius rundet die obere rechte Ecke eines Elements. Syntax, ein- und zweiwertige Verwendung sowie Prozentwerte.
Die CSS-Eigenschaft border-top-right-radius rundet die obere rechte Ecke des Border-Box eines Elements. Sie ist eine der vier Langform-Eigenschaften, in die die Kurzschreibweise border-radius aufgeteilt wird — die anderen sind border-top-left-radius, border-bottom-right-radius und border-bottom-left-radius. Verwenden Sie diese Langform, wenn Sie nur eine einzelne Ecke abrunden möchten, ohne die anderen drei zu beeinflussen.
Diese Eigenschaft gehört zu den CSS3-Eigenschaften.
Die Form der Abrundung hängt von den angegebenen Werten ab:
- Eckige Ecke — wenn der Radius
0beträgt (der Standardwert), bleibt die Ecke scharf. - Kreisförmige Ecke — wenn ein einzelner Wert (oder zwei gleiche Werte) angegeben wird, ist die Ecke ein Viertelkreis mit diesem Radius.
- Elliptische Ecke — wenn zwei unterschiedliche Werte angegeben werden, ist die Ecke ein Viertel einer Ellipse.
Wenn das Element ein Hintergrundbild oder eine Hintergrundfarbe hat, wird es an der abgerundeten Grenze abgeschnitten. Wie weit es abgeschnitten wird, wird durch die Eigenschaft background-clip gesteuert.
Die Eigenschaft akzeptiert die Werte length, percentage, initial und inherit und legt den horizontalen und vertikalen Radius der abgerundeten oberen rechten Ecke fest. Wenn ein Wert angegeben wird, werden damit sowohl der horizontale als auch der vertikale Radius gesetzt (kreisförmige Ecke). Bei zwei Werten legt der erste den horizontalen Radius und der zweite den vertikalen Radius fest (elliptische Ecke). Prozentwerte für den horizontalen Radius beziehen sich auf die Breite der Box, Prozentwerte für den vertikalen Radius auf deren Höhe. Negative Werte sind nicht erlaubt.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbt | Nein. |
| Animierbar | Ja. Die obere rechte Grenze ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderTopRightRadius = "25px"; |
Syntax
Syntax der CSS border-top-right-radius Eigenschaft
border-top-right-radius: length | % | initial | inherit;Schauen wir uns ein Beispiel an, bei dem nur ein Wert verwendet wird. Dieser definiert sowohl den horizontalen als auch den vertikalen Radius der Ellipse.
Beispiel der border-top-right-radius Eigenschaft:
Beispiel der CSS border-top-right-radius Eigenschaft mit nur einem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Ergebnis
Wenn zwei Werte angegeben werden, definiert der erste den horizontalen Radius und der zweite den vertikalen Radius, was eine elliptische Ecke erzeugt.
Beispiel der border-top-right-radius Eigenschaft mit zwei Werten:
Beispiel der CSS border-top-right-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-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Beispiel der border-top-right-radius Eigenschaft mit Prozentwerten:
Beispiel der CSS border-top-right-radius Eigenschaft mit % (Prozentwerten)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Wann verwenden
Greifen Sie auf border-top-right-radius (anstelle der Kurzschreibweise border-radius) zurück, wenn nur die obere rechte Ecke abgerundet werden soll — zum Beispiel die führende Ecke eines Tabs, einer Chat-Blase oder einer Karte, deren andere Ecken eckig bleiben müssen. Um alle vier Ecken auf einmal abzurunden, ist die Kurzschreibweise border-radius kürzer:
/* Round only the top-right corner */
border-top-right-radius: 12px;
/* Round all four corners at once */
border-radius: 12px;Werte
Die folgende Tabelle listet die akzeptierten Werte auf.
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| length | Definiert die runde Form der oberen rechten Ecke. | Ausprobieren » |
| % | Definiert die runde Form der oberen rechten Ecke in %. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |