このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2021年4月.
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> <div> これは周囲に境界線があるボックスです。 </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: revert-layer;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>テキストの例</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 |