border-start-start-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-start-start-radius CSS Eigenschaft definiert einen logischen Rahmenradius auf einem Element, der auf einen physischen Rahmenradius abgebildet wird, welcher von dem writing-mode, der direction und der text-orientation des Elements abhängt. Dies ist nützlich beim Erstellen von Stilvorlagen, die unabhängig von der Textausrichtung und dem Schreibmodus funktionieren sollen.

Probieren Sie es aus

Diese Eigenschaft beeinflusst die Ecke zwischen den block-start und inline-start Seiten des Elements. Zum Beispiel entspricht es im Schreibmodus horizontal-tb mit ltr Richtung der border-top-left-radius Eigenschaft.

Syntax

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

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

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

Werte

<length-percentage>

Bezeichnet die Größe des Kreisradius oder die semi-major und semi-minor Achsen der Ellipse. Als absolute Länge kann es in jeder Einheit ausgedrückt werden, die vom CSS <length> Datentyp erlaubt ist. Prozentwerte für die horizontale Achse beziehen sich auf die Breite des Kastens, Prozentwerte für die vertikale Achse beziehen sich auf die Höhe des Kastens. 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-start-start-radius = 
  <length-percentage [0,∞]>{1,2}  

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

Beispiele

Rahmenradius mit vertikalem Text

HTML

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

CSS

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

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}

Ergebnisse

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch