CSS border-top-right-radius-Eigenschaft
Die CSS-Eigenschaft border-top-right-radius definiert die abgerundete Form der oberen rechten Ecke des Elements.
Diese Eigenschaft ist eine der CSS3-Eigenschaften.
Es gibt drei Arten der Abrundung. Sie kann ein Kreis oder eine Ellipse sein, oder der Wert ist 0, dann ist die Ecke quadratisch. Wenn Sie ein Hintergrundbild oder eine Farbe verwenden, wird es am Rand abgeschnitten. Der Vorgang des Abschneidens wird durch den Wert der background-clip-Eigenschaft definiert.
Die Eigenschaft akzeptiert Werte für Länge, Prozent, initial und inherit. Die Eigenschaft border-top-right-radius gibt den horizontalen und vertikalen Radius an, der die abgerundete obere rechte Ecke für eine Rahmenbox definiert. Wenn nur ein Wert angegeben wird, gibt dieser sowohl den horizontalen als auch den vertikalen Radius der Ellipse an. Wenn zwei Werte angegeben werden, legt der erste den horizontalen Radius und der zweite den vertikalen Radius fest. Prozentangaben für den horizontalen Radius beziehen sich auf die Breite der Box, und Prozentangaben für den vertikalen Radius beziehen sich auf die Höhe der Box. Negative Werte sind nicht erlaubt.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die obere rechte Ecke 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;Versuchen wir ein Beispiel, in dem nur ein Wert verwendet wird. Dieser definiert sowohl den horizontalen als auch den vertikalen Radius der Ellipse.
Beispiel für die 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>Wenn zwei Werte angegeben werden, definiert der erste den horizontalen Radius und der zweite den vertikalen Radius.
Ergebnis
Beispiel für die 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 für die border-top-right-radius-Eigenschaft in Prozent:
Beispiel der CSS border-top-right-radius-Eigenschaft mit % (Prozent)-Wert
<!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>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| length | Definiert die abgerundete Form der oberen rechten Ecke. | Ausführen » |
| % | Definiert die abgerundete Form der oberen rechten Ecke in %. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was macht die CSS-Eigenschaft 'border-top-right-radius'?