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 ⁨Juli 2015⁩.

Die border-bottom-left-radius CSS Eigenschaft rundet die untere linke Ecke eines Elements ab, indem der Radius (oder der Radius der Halb-Haupt- und Nebenachsen) der Ellipse angegeben wird, 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;
}

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>: Bezeichnet die Größe des Kreisradius oder die Halb-Haupt- und Nebenachsen der Ellipse. Als absolute Länge kann es in jeder vom CSS <length> Datentyp erlaubten Einheit ausgedrückt werden. Prozentwerte für die horizontale Achse beziehen sich auf die Breite des Kastens, Prozentwerte für die vertikale Achse beziehen sich auf die Höhe des Kastens. Negative Werte sind ungültig.

Beschreibung

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

Ein Hintergrund, sei es ein Bild oder eine Farbe, wird an der Grenze abgeschnitten, selbst bei einer abgerundeten; der genaue Ort des Abschneidens wird durch den Wert der background-clip Eigenschaft definiert.

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

Formale Definition

Anfangswert	`0`
Anwendbar auf	alle 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`.
Vererbt	Nein
Prozentwerte	bezieht sich auf die Größe der Border-Box
Berechneter Wert	zwei absolute `<length>` oder `<percentage>`
Animationstyp	Längenangabe, Prozentsatz oder `calc()`;

Formale Syntax

border-bottom-left-radius = 
  <border-radius>  

<border-radius> = 
  <slash-separated-border-radius-syntax>  |
  <legacy-border-radius-syntax>           

<slash-separated-border-radius-syntax> = 
  <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?  

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

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

Beispiele

Bogen eines Kreises

Ein einzelner <length> Wert erzeugt einen Bogen eines Kreises.

<div></div>

css

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

Bogen einer Ellipse

Zwei verschiedene <length> Werte erzeugen einen Bogen einer Ellipse.

<div></div>

css

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

Quadratisches Element mit prozentualem Radius

Ein quadratisches Element mit einem einzelnen <percentage> Wert erzeugt einen Bogen eines Kreises.

<div></div>

css

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

Nicht-quadratisches Element mit prozentualem Radius

Ein nicht-quadratisches Element mit einem einzelnen <percentage> Wert erzeugt einen Bogen einer Ellipse.

<div></div>

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

border-radius Kurzschreibweise-Eigenschaft
border-top-right-radius, border-bottom-right-radius, und border-top-left-radius

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden