border-top-right-radius CSS property

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

Syntax

/* 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> und gibt den Radius des Kreises an, der für die Grenze in dieser Ecke verwendet werden soll.

Mit zwei Werten:

• Der erste Wert ist ein <length> oder ein <percentage> und gibt die horizontale Semi-Hauptachse der Ellipse an, die für die Grenze in dieser Ecke verwendet werden soll.
• Der zweite Wert ist ein <length> oder ein <percentage> und gibt die vertikale Semi-Hauptachse der Ellipse an, die für die Grenze in dieser Ecke verwendet werden soll.

Werte

<length-percentage>

Gibt die Größe des Kreisradius oder die Semi-Haupt- und Semi-Nebenachse der Ellipse an. Als absolute Länge kann er in jeder Einheit ausgedrückt werden, die vom CSS-<length>-Datentyp erlaubt ist. Prozentwerte für die horizontale Achse beziehen sich auf die Breite der Box, Prozentwerte für die vertikale Achse beziehen sich auf die Höhe der Box. 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 bleibt quadratisch.

Ein Hintergrund, sei es ein Bild oder eine Farbe, wird an der Grenze abgegrenzt, auch wenn sie abgerundet ist; der genaue Ort der Abgrenzung wird durch den Wert der background-clip-Eigenschaft definiert.

Formale Definition

Formale Syntax

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

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

Bogen einer Ellipse

Zwei unterschiedliche <length>-Werte erzeugen einen Bogen einer Ellipse.

<div></div>

div {
  border-top-right-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 Bogen eines Kreises.

<div></div>

div {
  border-top-right-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 Bogen einer Ellipse.

<div></div>

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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