Ви читаєте англійську версію цього вмісту, бо ще не існує перекладу для цієї мови. Допоможіть нам перекласти цю статтю!
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The border-block-width
CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width
and border-bottom-width
, or border-left-width
, and border-right-width
property depending on the values defined for writing-mode
, direction
, and text-orientation
.
/* <'border-width'> values */ border-block-width: 5px; border-block-width: thick;
The border width in the other dimension can be set with border-inline-width
, which sets border-inline-start-width
, and border-inline-end-width
.
Initial value | medium |
---|---|
Applies to | all elements |
Inherited | no |
Percentages | logical-width of containing block |
Media | visual |
Computed value | absolute length; 0 if the border style is none or hidden |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<'border-width'>
- The width of the border. See
border-width
.
Formal syntax
<'border-top-width'>
Example
HTML Content
<div> <p class="exampleText">Example text</p> </div>
CSS Content
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; }
Specification
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'border-block-width' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-block-width | Chrome Full support 69 | Edge No support No | Firefox Full support 66 | IE No support No | Opera Full support 56 | Safari No support No | WebView Android Full support 69 | Chrome Android Full support 69 | Firefox Android Full support 66 | Opera Android Full support 48 | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
- This property maps to one of the physical border properties:
border-top-width
,border-right-width
,border-bottom-width
, andborder-left-width
writing-mode
,direction
,text-orientation