線の種類 border-style|CSS辞典|HTMLタグ・CSS

HomeCSS辞典線の種類 border-style
サイト内検索

線の種類 border-style

線の種類 (詳細情報)
字体 border-style:★;  線をまとめて指定。
border-top-style:★;  線を上だけ指定。
border-left-style:★;  線を左だけ指定。
border-right-style:★;  線を右だけ指定。
border-bottom-style:★;  線を下だけ指定。
指定 ★の部分に下記の「 」内 の効果を指定していきます。
  • solid」 枠線を1本線で表示する。
  • double」 枠線を2本線で表示する。(太さが細いと隙間がなくなる)
  • groove」 枠線を立体的にへこんだように表示する。
  • ridge」 枠線を立体的な飛び出したように表示する。
  • inset」 枠線が外側に飛び出したように表示する。
  • outset」 枠線が内側に飛び出したように表示する。
  • dashed」 枠線を破線で表示する。( Internet Explorer 5 ↑
  • dotted」 枠線を点々に表示する。( Internet Explorer 5 ↑
  • hidden」 表示しない。
  • none」 通常の初期状態にする。
border-style だけで指定すると、上下左右の余白をまとめて指定することができます。
  • 4つ指定すると上、右、下、左と指定することができます。
    例: border-style: solid double groove ridge;
  • 3つ指定すると上、左右、下と3パターン指定することができます。
    例: border-style: solid double groove;
  • 2つ指定すると上下、左右と2パターン指定することができます。
    例: border-style: solid double;
  • 1つ指定すると上下左右と全部同じ指定をすることができます。
    例: border-style: solid;
効果 ボックスの枠線の種類を指定することができます。
例1 <div style="border-style: solid;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例2 <div style="border-style: double;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例3 <div style="border-style: groove;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例4 <div style="border-style: ridge;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例5 <div style="border-style: inset;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例6 <div style="border-style: outset;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例7 <div style="border-style: dashed;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例8 <div style="border-style: dotted;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例9 <div style="border-top-style: double;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例10 <div style="border-style: dotted solid;">ホームページの素材屋です</div>
結果
ホームページの素材屋です


練習用書き込みフォーム(サンプル表示)


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料HP素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材NAVI 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材R Webランキング