-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 つ以上、任意の順で指定します。

<'border-width'>

See border-width

<'border-style'>

See border-style

<'color'>

See color

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承あり
パーセント値一括指定の次の各プロパティとして
計算値一括指定の次の各プロパティとして
アニメーションの種類離散値

形式文法

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 プロパティに関連しています。

ブラウザーの互換性

BCD tables only load in the browser

関連情報