border-end-end-radius CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2021 browserübergreifend verfügbar.
Die border-end-end-radius-Eigenschaft von CSS definiert einen logischen Rahmenradius auf einem Element, der einem physischen Rahmenradius zugeordnet wird. Dieser hängt von dem writing-mode, der direction und der text-orientation des Elements ab. Dies ist nützlich, um Stile zu erstellen, die unabhängig von der Textorientierung und dem Schreibmodus funktionieren.
Diese Eigenschaft beeinflusst die Ecke zwischen den Block-End- und Inline-End-Seiten des Elements. Zum Beispiel entspricht sie im Schreibmodus horizontal-tb mit ltr-Richtung der Eigenschaft border-bottom-right-radius.
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;
}
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 Kreisradiuses oder der Haupt- und Nebenachsen der Ellipse. Als absolute Länge kann sie in jeder vom CSS
<length>-Datentyp erlaubten Einheit ausgedrückt werden. 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.
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 =
<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
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: white;
border-end-end-radius: 10px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # border-radius-properties |
Browser-Kompatibilität
Siehe auch
- CSS-Logische Eigenschaften und Werte
- Die zugeordnete physische Eigenschaft:
border-bottom-right-radius writing-mode,direction,text-orientation