border-top-style - 上枠のスタイルを指定する

投稿日: / 更新日:

スタイルシートのborder-top-styleは、上枠のスタイルを指定するためのプロパティです。

サンプルコード

border-top-styleを指定した例です。このプロパティの指定を有効にするには、あらかじめ枠線を用意して下さい。

div {
	border: 6px solid #333 ;
	border-top-style: dotted ;
}

デモ

border-top-styleを指定した例です。上枠だけ、枠線がドットスタイルになっているのを確認して下さい。CSSタブを編集して、どのように表示が変わるか試してみて下さい。

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のborder-top-styleには、bodyに指定された値(dotted)が引き継がれる。
initialプロパティの初期値が適用される。この場合、noneとなる。
none枠線は表示されない。
hidden枠線は表示されない。noneと同じ。
dottedドットのスタイル。
dashed短い線のスタイル。
solidノーマルな線のスタイル。
double二重線のスタイル。色が塗られた線が2本と塗られていない線が1本。3つの線がありますが、その太さは三等分になっています。
groove額縁のように、枠線の内側、外側で色が別れる。ridgeの逆。
ridge額縁のように、枠線の内側、外側で色が別れる。grooveの逆。
inset額縁のように、上側、右側が濃くなる。outsetの逆。
outset額縁のように、下側、左側が濃くなる。上枠だけに指定すると何も変わらない。insetの逆。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

  • Chrome

    ●

    -

    時期不明

  • Firefox

    ●

    -

    時期不明

  • Safari

    ●

    -

    時期不明

  • Ie

    ●

    -

    時期不明

  • Edge

    ●

    -

    時期不明

  • Opera

    ●

    -

    時期不明

  • Safari(iOS)

    ●

    -

    時期不明

  • Ie Mobile

    ●

    -

    時期不明

  • Chrome

    ●

    -

    時期不明

  • Android

    ●

    -

    時期不明

  • FF Mobile

    ●

    -

    時期不明

  • Opera Mobile

    ●

    -

    時期不明