border-block-width

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.

border-block-width は CSS のプロパティで、要素の論理的なブロック方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width と border-bottom-width、または border-left-width と border-right-width のどちらかに対応し、どちらに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。

試してみましょう

border-block-width: thick; writing-mode: horizontal-tb; 
border-block-width: thick; writing-mode: vertical-rl; 
border-block-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; }

他の方向の境界の幅は border-inline-width で設定でき、これは border-inline-start-width および border-inline-end-width を設定します。

構文

css
/* <'border-width'> 値 */ border-block-width: 5px; border-block-width: thick; /* グローバル値 */ border-block-width: inherit; border-block-width: initial; border-block-width: revert; border-block-width: unset;

値

<'border-width'>

境界の幅です。 border-width を参照してください。

公式定義

初期値medium
適用対象すべての要素
継承なし
パーセント値包含ブロックの論理的な幅
計算値絶対的な長さ、境界スタイルが none または hidden であれば 0
アニメーションの種類計算値の型による

形式文法

border-block-width = 
<'border-top-width'>{1,2}

<border-top-width> = 
<line-width>

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

例

縦書きテキストの境界の幅

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-block-width: 5px; }

結果

仕様書

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

ブラウザーの互換性

関連情報