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 Randradius eines Elements, der auf einen physikalischen Randradius abgebildet wird, der vom writing-mode
, direction
und text-orientation
des Elements abhängt. Dies ist nützlich, wenn Sie Stile erstellen, die unabhängig von der Textorientierung und dem Schreibmodus funktionieren sollen.
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-Ende- und Inline-Ende-Seiten des Elements. Zum Beispiel entspricht sie im horizontal-tb
Schreibmodus mit ltr
Richtung der border-bottom-right-radius
Eigenschaft.
Syntax
/* <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>
-
Bezeichnet die Größe des Kreisradius oder die Haupt- und Nebenachsen der Ellipse. Als absolute Länge kann sie in jeder Einheit ausgedrückt werden, die durch den 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
Anfangswert | 0 |
---|---|
Anwendbar auf | alle 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 . |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Größe der Border-Box |
Berechneter Wert | zwei absolute <length> oder <percentage> |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Formale Syntax
border-end-end-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Beispiele
Randradius mit vertikalem Text
HTML
<div>
<p class="exampleText">Example</p>
</div>
CSS
div {
background-color: rebeccapurple;
width: 120px;
height: 120px;
border-end-end-radius: 10px;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: #fff;
border-end-end-radius: 10px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # border-radius-properties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS Logische Eigenschaften und Werte
- Die zugeordnete physikalische Eigenschaft:
border-bottom-right-radius
writing-mode
,direction
,text-orientation