このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
border-block-color
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-color はCSS のプロパティで、要素の論理的なブロックの両端の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これはborder-top-color およびborder-bottom-color、またはborder-right-color およびborder-left-color のどちらかに対応し、どちらに対応するかはwriting-mode,direction,text-orientation で定義された値によって決まります。
試してみましょう
border-block-color: red;writing-mode: horizontal-tb;border-block-color: #32a1ce;writing-mode: vertical-rl;border-block-color: rgb(170 50 220 / 0.6);writing-mode: horizontal-tb;direction: rtl;<section> <div> これは周囲に境界線があるボックスです。 </div></section>#example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override;}他の方向の境界については、border-inline-color によって、border-inline-start-color とborder-inline-end-color の両方を設定することができます。
構文
css
border-block-color: yellow;border-block-color: #f5f6f7;/* グローバル値 */border-block-color: inherit;border-block-color: initial;border-block-color: revert;border-block-color: revert-layer;border-block-color: unset;値
<color>境界線の色です。
公式定義
| 初期値 | currentcolor |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |
形式文法
border-block-color =
<'border-top-color'>{1,2}
<border-top-color> =
<color>|
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
例
縦書きテキストの境界
HTML
html
<div> <p>テキストの例</p></div>CSS
css
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red;}結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-color |