CSS border-bottom-right-radius Eigenschaft
CSS border-bottom-right-radius rundet die untere rechte Ecke eines Elements. Syntax, Werte und Live-Beispiele.
Die CSS-Eigenschaft border-bottom-right-radius rundet ausschließlich die untere rechte Ecke des Rahmenrahmens eines Elements. Sie ist eine der vier Langhand-Eigenschaften — zusammen mit border-top-left-radius, border-top-right-radius und border-bottom-left-radius — die die Kurzschreibweise border-radius zusammenfasst. Verwenden Sie die Langhand-Eigenschaft, wenn Sie eine einzelne Ecke abrunden und die übrigen eckig lassen möchten. Sie ist Teil der CSS3-Eigenschaften.
Funktionsweise
Die Ecke wird als Viertel einer Ellipse gezeichnet, die durch einen horizontalen und einen vertikalen Radius definiert wird:
- Ein Wert legt beide Radien fest und erzeugt eine perfekt kreisförmige (symmetrische) Ecke.
- Zwei Werte legen zuerst den horizontalen Radius und dann den vertikalen Radius fest und erzeugen eine elliptische Ecke.
- Prozentwerte werden relativ zur Box des Elements aufgelöst: Der horizontale Radius ist ein Prozentsatz der Breite, der vertikale Radius ein Prozentsatz der Höhe.
Wenn kein Wert festgelegt ist, beträgt der Radius 0 und die Ecke bleibt scharf und eckig. Eine Hintergrundfarbe oder ein Hintergrundbild wird an der abgerundeten Ecke abgeschnitten; mit der Eigenschaft background-clip können Sie steuern, wo der Zuschnitt erfolgt.
Einige wichtige Hinweise:
- Negative Werte sind ungültig — die Ecke bleibt bei
0. - Die Eigenschaft ist animierbar, sodass Ecken bei
:hoveroder über Keyframes fließend wechseln können. - Die Browserunterstützung ist in modernen Browsern und in jeder Version des Internet Explorer ab IE9 universell vorhanden.
border-bottom-right-radius ist eine Langhand-Eigenschaft. Wenn die Kurzschreibweise border-radius in derselben Regel danach deklariert wird, setzt die Kurzschreibweise alle vier Ecken zurück und überschreibt diesen Wert. Ordnen Sie Ihre Deklarationen entsprechend an.
| Ausgangswert | 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 der 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 der 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 der 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 | Ausprobieren |
|---|---|---|
| length | Legt die Formgebung der unteren rechten Ecke in „px" fest. | Ausprobieren » |
| % | Legt die Formgebung der unteren rechten Ecke in Prozent fest. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
- border-radius — die Kurzschreibweise, die alle vier Ecken auf einmal festlegt.
- border-top-left-radius, border-top-right-radius, border-bottom-left-radius — die drei anderen Ecken-Langhand-Eigenschaften.
- background-clip — steuert, wie ein Hintergrund an abgerundeten Ecken abgeschnitten wird.