-webkit-border-before
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
-webkit-border-before は CSS のプロパティで、個々の論理ブロックの境界の先頭側のプロパティ値をスタイルシートの一箇所で設定するための一括指定プロパティです。
css
/* border の値 */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* グローバル値 */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before は -webkit-border-before-width, -webkit-border-before-style, -webkit-border-before-color のうちの 1 つ以上の値で設定することができます。これはその要素の書字方向やテキストの向きに応じて、物理的な境界に対応付けられます。これは border-top, border-right, border-bottom, border-left の各プロパティに、 writing-mode, direction, text-orientation で定義された値に基づいて対応付けられます。
これは要素の他の境界を定義する -webkit-border-after, -webkit-border-start, -webkit-border-end に関連しています。
このプロパティは border-block-start として標準化過程にあります。
構文
値
以下のものを 1 つ以上、任意の順で指定します。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| パーセント値 | 一括指定の次の各プロパティとして
|
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 離散値 |
形式文法
Error: could not find syntax for this item例
縦書きテキストに境界を適用
HTML
html
<div> <p class="exampleText">Example text</p> </div> CSS
css
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; } 結果
仕様書
標準には含まれていませんが、標準化過程にある border-block-start プロパティに関連しています。
ブラウザーの互換性
関連情報
border-block-start- 対応付けられる物理的プロパティ:
border-top,border-right,border-bottom,border-left writing-mode,direction,text-orientation