border-inline-start-width

Baseline Widely available

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

Die border-inline-start-width CSS Eigenschaft definiert die Breite des logischen Inline-Start-Randes eines Elements. Diese wird, abhängig vom Schreibmodus, der Richtung und der Textausrichtung des Elements, auf eine physische Randbreite abgebildet. Sie entspricht der Eigenschaft border-top-width, border-right-width, border-bottom-width oder border-left-width, abhängig von den Werten, die für writing-mode, direction und text-orientation definiert sind.

Probieren Sie es aus

border-inline-start-width: thick; writing-mode: horizontal-tb; 
border-inline-start-width: thick; writing-mode: vertical-rl; 
border-inline-start-width: 4px; writing-mode: horizontal-tb; direction: rtl; 
<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> 
#example-element { background-color: palegreen; color: #000; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override; }

Syntax

css
/* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick; /* Global values */ border-inline-start-width: inherit; border-inline-start-width: initial; border-inline-start-width: revert; border-inline-start-width: revert-layer; border-inline-start-width: unset;

Verwandte Eigenschaften sind border-block-start-width, border-block-end-width, und border-inline-end-width, welche die anderen Randbreiten des Elements definieren.

Werte

<'border-width'>

Die Breite des Randes. Siehe border-width.

Formale Definition

Anfangswertmedium
Anwendbar aufalle Elemente
VererbtNein
Prozentwertelogische Breite des beinhaltenden Blocks
Berechneter Wertabsolute Länge; 0, falls der Rahmenstil none oder hidden ist
Animationstypby computed value type

Formale Syntax

border-inline-start-width = 
 <line-width> 

<line-width> = 
 <length [0,∞]> |
 thin |
 medium |
 thick

Beispiele

HTML

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

CSS

css
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; }

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# border-width

Browser-Kompatibilität

Siehe auch