border-top-right-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-top-right-radius-Eigenschaft von CSS rundet die obere rechte Ecke eines Elements ab, indem der Radius (oder der Radius der Haupt- und Nebenachsen) der Ellipse, die die Krümmung der Ecke definiert, angegeben wird.

Probieren Sie es aus

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

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

border-top-right-radius: 50%;

border-top-right-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 right 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 wenn einer der Werte 0 ist, wird keine Abrundung vorgenommen und die Ecke bleibt eckig.

border-top-right-radius.png

Ein Hintergrund, sei es ein Bild oder eine Farbe, wird an der Grenze abgeschnitten, auch bei abgerundeten Ecken; 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 gesetzt ist, die auf das Element nach der border-top-right-radius CSS-Eigenschaft angewendet wird, wird der Wert dieser Eigenschaft dann auf seinen initialen Wert durch die Kurzschreibweise zurückgesetzt.

Syntax

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

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

border-top-right-radius: inherit;

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

Mit einem Wert:

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

Mit zwei Werten:

  • Der erste Wert ist eine <length> oder ein <percentage>, der die horizontale Hauptachse der Ellipse angibt, die für die Begrenzung in dieser Ecke verwendet werden soll.
  • Der zweite Wert ist eine <length> oder ein <percentage>, der die vertikale Hauptachse der Ellipse angibt, die für die Begrenzung in dieser Ecke verwendet werden soll.

Werte

<length-percentage>

Gibt die Größe des Kreisradius oder der Haupt- und Nebenachsen der Ellipse an. Als absolute Länge kann er in jeder von der CSS <length>-Datentyp erlaubten Einheit ausgedrückt werden. Prozentsätze für die horizontale Achse beziehen sich auf die Breite des Rahmens, Prozentsätze für die vertikale Achse beziehen sich auf die Höhe des Rahmens. 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-top-right-radius = 
  <length-percentage [0,∞]>{1,2}  

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

Beispiele

Bogen eines Kreises

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

css
div {
  border-top-right-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.

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

Quadratisches Element mit Prozentwert

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

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

Nicht-quadratisches Element mit Prozentwert

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

css
div {
  border-top-right-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