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>

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>

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>

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.

Browser-Support

chrome firefox safari opera
4.0+ 4.0+ 5.0+ 10.5+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'border-bottom-right-radius'?
Finden Sie das nützlich?