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