CSS-Eigenschaft border-bottom-left-radius

Die Eigenschaft border-bottom-left-radius gibt die runde Form der linken unteren Ecke des Elements an. Es gibt drei Arten von Formen: einen Kreis oder eine Ellipse, wenn Sie keinen Wert verwenden, ist die Ecke quadratisch. Wenn Sie ein Hintergrundbild oder eine Hintergrundfarbe verwenden, wird es am Rand abgeschnitten. Der Prozess des Clippings wird durch den Wert der Eigenschaft background-clip definiert.

Die Eigenschaft border-bottom-left-radius hat zwei Werte: length und percentage. Wenn nur ein Wert angegeben wird, gibt er sowohl horizontale als auch vertikale Radien der Ellipse an. Wenn zwei Werte angegeben werden, setzt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius.

Die Prozentsätze für den horizontalen Radius beziehen sich auf die Breite der Box, die Prozentsätze für den vertikalen Radius auf die Höhe der Box. Negative Werte sind nicht erlaubt.

Anfangswert 0
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Der Radius des linken unteren Randes ist animierbar.
Version CSS3
DOM Syntax object.style.borderBottomLeftRadius = "35px";

Syntax

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

Beispiel

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

Betrachten wir ein weiteres Beispiel mit zwei Werten.

Beispiel

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

Sehen Sie sich ein Beispiel mit Prozent an.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      border: 2px solid blue;
      background-color: #666;
      padding: 10px;
      border-bottom-left-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-bottom-left-radius.</h2>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
length Es gibt die Rundung der linken unteren Ecke in "px" an.
% Es stellt die Rundung der linken 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

Wie wird die CSS-Eigenschaft 'border-bottom-left-radius' verwendet?
Finden Sie das nützlich?