border-block-end
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.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;
/* グローバル値 */
border-block-end: inherit;
border-block-end: initial;
border-block-end: revert;
border-block-end: unset;
border-block-end
は 1 つ以上の border-block-end-width
, border-block-end-style
, border-block-end-color
の値の組み合わせを使用することができます。対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは border-top
, border-right
, border-bottom
, border-left
の何れかに対応し、どれに対応するかは writing-mode
, direction
, text-orientation
で定義された値によって決まります。
関連するプロパティとしては、 border-block-start
, border-inline-start
, border-inline-end
が要素の他の境界を定義します。
値
border-block-end
は以下の値のうちの 1 つ以上を任意の順序で指定します。
<'border-width'>
-
境界の幅です。
border-width
を参照してください。 <'border-style'>
-
境界線のスタイルです。
border-style
を参照してください。 <'color'>
-
境界の色です。
color
を参照してください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
例
縦書きテキストの境界
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
border-block-end: 5px dashed blue;
}
結果
仕様書
Specification |
---|
CSS Logical Properties and Values Level 1 # border-shorthands |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このプロパティは
border-top
,border-right
,border-bottom
,border-left
のうちの一つに対応づけられます。 writing-mode
,direction
,text-orientation