このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2020年1月.
border-block-end はCSS のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。
試してみましょう
border-block-end: solid;writing-mode: horizontal-tb;border-block-end: dashed red;writing-mode: vertical-rl;border-block-end: 1rem solid;writing-mode: horizontal-tb;border-block-end: thick double #32a1ce;writing-mode: vertical-lr;<section> <div> これは周囲に境界線があるボックスです。 </div></section>#example-element { background-color: #eeeeee; color: darkmagenta; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override;}構成要素のプロパティ
このプロパティは以下の 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: revert-layer;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>境界線の色です。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
border-block-end =
<line-width>||
<line-style>||
<color>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
例
縦書きテキストの境界
HTML
<div> <p>テキストの例</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 |
ブラウザーの互換性
関連情報
- CSS 論理的プロパティと値
- このプロパティは
border-top,border-right,border-bottom,border-leftのうちの一つに対応づけられます。 writing-mode,direction,text-orientation