border-top-left-radius CSS property

Probieren Sie es aus

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

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

border-top-left-radius: 50%;

border-top-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 top 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

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

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

border-top-left-radius: inherit;

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

Mit einem Wert:

• der Wert ist ein <length> oder ein <percentage>, der den Radius des Kreises angibt, der für den Rand in dieser Ecke verwendet wird.

Mit zwei Werten:

• der erste Wert ist ein <length> oder ein <percentage>, der die horizontale Halbachse der Ellipse angibt, die für den Rand in dieser Ecke verwendet wird.
• der zweite Wert ist ein <length> oder ein <percentage>, der die vertikale Halbachse der Ellipse angibt, die für den Rand in dieser Ecke verwendet wird.

Werte

<length-percentage>

Gibt die Größe des Kreisradius oder die Größen der Halbachsen der Ellipse an. Als absolute Länge kann es in jeder vom CSS <length> Datentyp 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.

Beschreibung

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

Ein Hintergrund, sei es ein Bild oder eine Farbe, wird am Rand, selbst an einem abgerundeten, abgeschnitten; der genaue Ort der Clipping-Stelle wird durch den Wert der background-clip Eigenschaft definiert.

Formale Definition

Formale Syntax

border-top-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

Kreisbogen

Ein einzelner <length>-Wert erzeugt einen Kreisbogen.

<div></div>

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

Ellipsenbogen

Zwei unterschiedliche <length>-Werte erzeugen einen Ellipsenbogen.

<div></div>

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

Quadratisches Element mit Prozent-Radius

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

<div></div>

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

Nicht-quadratisches Element mit Prozent-Radius

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

<div></div>

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• border-radius Kurznotation-Eigenschaft
• border-top-right-radius, border-bottom-right-radius, und border-bottom-left-radius