-webkit-border-before
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
-webkit-border-before
は 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
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
結果
仕様書
標準には含まれていませんが、標準化過程にある border-block-start
プロパティに関連しています。
ブラウザーの互換性
BCD tables only load in the browser
関連情報
border-block-start
- 対応付けられる物理的プロパティ:
border-top
,border-right
,border-bottom
,border-left
writing-mode
,direction
,text-orientation