CSS border-bottom-right-radius-Eigenschaft
Die CSS-Eigenschaft border-bottom-right-radius wird verwendet, um die Abrundung der unteren rechten Ecke eines Elements festzulegen.
Die Eigenschaft border-bottom-right-radius ist eine der CSS3-Eigenschaften.
Die Eigenschaft border-bottom-right-radius gibt den horizontalen und vertikalen Radius an, der die abgerundete untere rechte Ecke für eine Rahmenbox definiert. Diese Eigenschaft wird durch zwei Werte festgelegt: Länge und Prozentwerte. Beachten Sie, dass Prozentwerte relativ zur Breite des Elements berechnet werden.
Wird nur ein Wert angegeben, legt er sowohl den horizontalen als auch den vertikalen Radius der Ellipse fest. Werden zwei Werte angegeben, legt der erste den horizontalen und der zweite den vertikalen Radius fest. Wird kein Wert definiert, beträgt der Radius standardmäßig 0px, was zu einer eckigen Ecke führt. Bei Verwendung eines Hintergrundbilds oder einer -farbe wird es am Rand abgeschnitten. Der Abschneideprozess wird durch den Wert der Eigenschaft background-clip definiert.
INFO
Wenn die Kurzschreibweiseigenschaft border-radius nach border-bottom-right-radius angewendet wird, überschreibt sie den Langschreibwert.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbt | Nein. |
| Animierbar | Ja. Der Radius der unteren rechten Ecke ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderBottomRightRadius = "15px"; |
Syntax
CSS border-bottom-right-radius-Eigenschaft
border-bottom-right-radius: length | % | initial | inherit;Beispiel für die border-bottom-right-radius-Eigenschaft:
CSS border-bottom-right-radius-Eigenschaft Beispiel mit einem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Ergebnis
Beispiel für die border-bottom-right-radius-Eigenschaft mit zwei Werten:
CSS border-bottom-right-radius-Eigenschaft Beispiel mit zwei Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #eee;
border: 4px solid #666;
border-bottom-right-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Beispiel für die border-bottom-right-radius-Eigenschaft mit dem Wert „Prozent“:
CSS border-bottom-right-radius-Eigenschaft Beispiel mit einem Prozentwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-bottom-right-radius: 30% 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| length | Definiert die Form der unteren rechten Ecke in „px“. | Testen » |
| % | Definiert die Form der unteren rechten Ecke in Prozent. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Aussagen über die CSS border-bottom-right-radius-Eigenschaft sind wahr?