このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
border-block-end-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
border-block-end-color はCSS のプロパティで、要素の論理的なブロックの末尾側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これはborder-top-color,border-right-color,border-bottom-color,border-left-color の何れかに対応し、どれに対応するかはwriting-mode,direction,text-orientation で定義された値によって決まります。
試してみましょう
border-block-end-color: red;writing-mode: horizontal-tb;border-block-end-color: #32a1ce;writing-mode: vertical-rl;border-block-end-color: rgb(170 50 220 / 0.6);writing-mode: horizontal-tb;border-block-end-color: hsl(60 90% 50% / 0.8);writing-mode: vertical-lr;<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;}構文
css
border-block-end-color: yellow;border-block-end-color: #f5f6f7;/* グローバル値 */border-block-end-color: inherit;border-block-end-color: initial;border-block-end-color: revert;border-block-end-color: revert-layer;border-block-end-color: unset;関連するプロパティとしては、border-block-start-color,border-inline-start-color,border-inline-end-color が要素の他の境界色を定義します。
値
<color>境界線の色です。
公式定義
| 初期値 | currentcolor |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |
形式文法
border-block-end-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-end-color: red;}結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # border-color |