CSS-Eigenschaft border-bottom-right-radius

Die Eigenschaft border-bottom-right-radius gibt die runde Form der rechten unteren Ecke des Elements an.

Die Eigenschaft border-bottom-right-radius gibt die horizontalen und vertikalen Radien an, die die abgerundete untere rechte Ecke für einen Rahmen definieren. Diese Eigenschaft wird durch zwei Werte angegeben: length und percentages.

Wenn nur ein Wert angegeben wird, gibt er sowohl horizontale als auch vertikale Radien der Ellipse an. Wenn zwei Werte angegeben werden, stellt der erste den horizontalen Radius und der zweite den vertikalen Radius ein. Wenn kein Wert definiert ist, ist der Rand quadratisch, bei Verwendung von Hintergrundbild oder Farbe wird er am Rand abgeschnitten. Der Prozess des Clippings wird durch den Wert background-clip definiert.

Anfangswert	0
Gilt für	Alle Element. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja, der Radius des rechten unteren Randes ist animierbar.
Version	CSS3
DOM Syntax	object.style.borderBottomRightRadius = "15px";

Syntax

border-bottom-right-radius: length | % | initial | inherit;

Jetzt betrachten wir ein Beispiel mit einem Wert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      height: 40px;
      background: #1c87c9;
      border: 4px solid #000000;
      border-bottom-right-radius: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-bottom-right-radius.</h2>
    <div></div>
  </body>
</html>

Versuch es selber!

Jetzt betrachten wir ein Beispiel mit zwei Werten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      height: 40px;
      background: #eee;
      border: 4px solid #666;
      border-bottom-right-radius: 30px 15px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-bottom-right-radius.</h2>
    <div></div>
  </body>
</html>

Versuch es selber!

Hier sind die Werte in Prozent definiert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      height: 40px;
      background: #8ebf42;
      border: 4px solid #000000;
      border-bottom-right-radius: 30% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-bottom-right-radius.</h2>
    <div></div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
length	Es gibt die Rundung der rechten unteren Ecke in "px" an.
%	Es stellt die Rundung der rechten unteren Ecke in Prozent dar.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.