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 Randradius für ein Element, der zu einem physischen Randradius umgewandelt wird und von dem writing-mode, direction und text-orientation des Elements abhängt. Dies ist nützlich, um Styles zu erstellen, die unabhängig von der Textausrichtung und dem Schreibmodus funktionieren.

Diese Eigenschaft beeinflusst die Ecke zwischen den blockanfangs- und den inlineanfangs-Seiten des Elements. Zum Beispiel entspricht sie in einem horizontal-tb-Schreibmodus mit ltr-Richtung der border-top-left-radius-Eigenschaft.

Probieren Sie es aus

border-start-start-radius: 80px 80px;

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

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

border-start-start-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 top left 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

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 Kreisesradius oder die Halb-Haupt- und Halb-Nebenachsen der Ellipse. Als absolute Länge kann es 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 des Kastens, Prozentsätze für die vertikale Achse auf die Höhe des Kastens. 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-start-start-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

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: white;
  border-start-start-radius: 10px;
}

Ergebnisse

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS Logische Eigenschaften und Werte
Die abgebildete physische Eigenschaft: border-top-left-radius
writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden