border-bottom-left-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-bottom-left-radius CSS Eigenschaft rundet die untere linke Ecke eines Elements ab, indem sie den Radius (oder den Radius der halb-haupt- und halb-nebenachsen) der Ellipse angibt, die die Krümmung der Ecke definiert.

Probieren Sie es aus

border-bottom-left-radius: 80px 80px;

border-bottom-left-radius: 250px 100px;

border-bottom-left-radius: 50%;

border-bottom-left-radius: 50%;
border: black 10px double;
background-clip: content-box;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a bottom left rounded corner.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Die Abrundung kann ein Kreis oder eine Ellipse sein, oder falls einer der Werte 0 ist, erfolgt keine Abrundung und die Ecke ist quadratisch.

border-bottom-left-radius.png

Ein Hintergrund, sei es ein Bild oder eine Farbe, wird am Rand abgeschnitten, auch wenn dieser abgerundet ist; der genaue Ort des Zuschnitts wird durch den Wert der background-clip Eigenschaft definiert.

Hinweis: Wenn der Wert dieser Eigenschaft nicht in einer border-radius Kurzform-Eigenschaft gesetzt ist, die nach der border-bottom-left-radius CSS-Eigenschaft auf das Element angewendet wird, wird der Wert dieser Eigenschaft von der Kurzform-Eigenschaft auf seinen Anfangswert zurückgesetzt.

Syntax

css
/* the corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* Percentage values */

/* circle if box is a square or ellipse if box is a rectangle */
border-bottom-left-radius: 20%;

/* same as above: 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 20%;

/* 20% of horizontal(width) and 10% of vertical(height) */
border-bottom-left-radius: 20% 10%;

/* the corner is an ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

/* Global values */
border-bottom-left-radius: inherit;
border-bottom-left-radius: initial;
border-bottom-left-radius: revert;
border-bottom-left-radius: revert-layer;
border-bottom-left-radius: unset;

Mit einem Wert:

  • der Wert ist ein <length> oder ein <percentage>, der den Radius des Kreises angibt, der für die Ecke verwendet werden soll.

Mit zwei Werten:

  • der erste Wert ist ein <length> oder ein <percentage>, der die horizontale halb-hauptachse der Ellipse angibt, die für die Ecke verwendet werden soll.
  • der zweite Wert ist ein <length> oder ein <percentage>, der die vertikale halb-hauptachse der Ellipse angibt, die für die Ecke verwendet werden soll.

Werte

<length-percentage>

Gibt die Größe des Kreisbogenradius oder der halb-haupt- und halb-nebenachsen der Ellipse an. Als absolute Länge kann sie in jeder von der CSS <length> Datenklasse erlaubten Einheit ausgedrückt werden. Prozentsätze für die horizontale Achse beziehen sich auf die Breite des Kastens, Prozentsätze für die vertikale Achse beziehen sich auf die Höhe des Kastens. Negative Werte sind ungültig.

Formale Definition

Anfangswert0
Anwendbar aufalle Elemente; aber User Agents sind nicht gezwungen dies auf table und inline-table Elemente anzuwenden, falls border-collapse collapse ist. Das Verhalten bei internen Tabellenelementen ist momentan undefiniert.. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Größe der Border-Box
Berechneter Wertzwei absolute <length> oder <percentage>
AnimationstypLängenangabe, Prozentsatz oder calc();

Formale Syntax

border-bottom-left-radius = 
  <length-percentage [0,∞]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Kreisbogen

Ein einzelner <length> Wert erzeugt einen Kreisbogen.

css
div {
  border-bottom-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Ellipsenbogen

Zwei verschiedene <length> Werte erzeugen einen Ellipsenbogen.

css
div {
  border-bottom-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Quadratisches Element mit Prozentsatzradius

Ein quadratisches Element mit einem einzigen <percentage> Wert erzeugt einen Kreisbogen.

css
div {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Nicht-quadratisches Element mit Prozentsatzradius

Ein nicht-quadratisches Element mit einem einzigen <percentage> Wert erzeugt einen Ellipsenbogen.

css
div {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# border-radius

Browser-Kompatibilität

Siehe auch