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 January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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 class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは周囲に境界線があるボックスです。
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #000;
  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 class="exampleText">テキストの例</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