border-end-end-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Die border-end-end-radius CSS-Eigenschaft definiert einen logischen Border-Radius auf einem Element, der auf einen physischen Border-Radius abbildet, der von den Eigenschaften writing-mode, direction und text-orientation des Elements abhängt. Dies ist nützlich, um Stile zu erstellen, die unabhängig von Textorientierung und Schreibrichtung funktionieren.

Probieren Sie es aus

border-end-end-radius: 80px 80px;

border-end-end-radius: 250px 100px;
direction: rtl;

border-end-end-radius: 50%;
writing-mode: vertical-lr;

border-end-end-radius: 50%;
writing-mode: vertical-rl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a bottom 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;
}

Diese Eigenschaft beeinflusst die Ecke zwischen den Block-End- und den Inline-End-Seiten des Elements. Beispielsweise entspricht sie im horizontal-tb-Schreibmodus mit ltr-Richtung der border-bottom-right-radius-Eigenschaft.

Syntax

css
/* <length> values */
/* With one value the corner will be a circle */
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/* With two values the corner will be an ellipse */
border-end-end-radius: 1em 2em;

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

Werte

<length-percentage>

Gibt die Größe des Kreisradius oder die Halbachsen der Ellipse an. Als absolute Länge kann sie in jeder Einheit ausgedrückt werden, die vom CSS <length>-Datentyp erlaubt ist. 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

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-end-end-radius = 
  <length-percentage [0,∞]>{1,2}  

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

Beispiele

Border-Radius mit vertikalem Text

HTML

html
<div>
  <p class="exampleText">Example</p>
</div>

CSS

css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: white;
  border-end-end-radius: 10px;
}

Ergebnis

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# border-radius-properties

Browser-Kompatibilität

Siehe auch