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 CSS Eigenschaft rundet die obere rechte Ecke eines Elements, indem sie den Radius (oder die Radien der Haupt- und Nebenachse) der Ellipse angibt, die die Krümmung der Ecke definiert.

Probieren Sie es aus

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

border-top-right-radius.png

Ein Hintergrund, sei es ein Bild oder eine Farbe, wird am Rand abgeschnitten, selbst bei einer abgerundeten Ecke; der genaue Ort der Abschneidung wird durch den Wert der background-clip Eigenschaft definiert.

Hinweis: Wenn der Wert dieser Eigenschaft nicht in einer border-radius Kurzschreibweise festgelegt wird, die nach der border-top-right-radius CSS-Eigenschaft auf das Element angewendet wird, wird der Wert dieser Eigenschaft durch die Kurzschreibweise auf seinen Ausgangswert 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 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 Hauptachse 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 Hauptachse der Ellipse angibt, die für den Rand in dieser Ecke verwendet wird.

Werte

<length-percentage>

Bezeichnet die Größe des Kreisradius oder die Halbachsen der Ellipse. Als absoluter Wert 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 der Box, Prozentsätze für die vertikale Achse beziehen sich auf die Höhe der Box. Negative Werte sind ungültig.

Formale Definition

Initialer Wert0
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;
}

Quadrat-Element mit Prozentwert-Radius

Ein quadratisches Element mit einem einzelnen <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-Radius

Ein nicht-quadratisches Element mit einem einzelnen <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
# the-border-radius

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch