border-block-style は CSS のプロパティで、要素の論理的なブロック方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは border-top-style と border-bottom-style、または border-right-style と border-left-style のどちらかに対応し、どちらに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。
/* <'border-style'> 値 */ border-block-style: dashed; border-block-style: dotted; border-block-style: groove;
他の方向の境界については、 border-block-style によって、 border-block-start-style と border-block-end-style の両方を設定することができます。
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
構文
値
<'border-style'>- 境界のスタイルです。
border-styleを参照してください。
形式文法
<'border-top-style'>
例
HTML
<div> <p class="exampleText">Example text</p> </div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
border: 5px solid blue;
border-block-style: dashed;
}
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Logical Properties and Values Level 1 border-block-style の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-block-style | Chrome 完全対応 69 | Edge 完全対応 79 | Firefox 完全対応 66 | IE 未対応 なし | Opera 完全対応 56 | Safari 未対応 なし | WebView Android 完全対応 69 | Chrome Android 完全対応 69 | Firefox Android 完全対応 66 | Opera Android 完全対応 48 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 10.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
関連情報
- このプロパティは
border-top-style,border-right-style,border-bottom-style,border-left-styleのうちの1つに対応します writing-mode,direction,text-orientation