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

Home≫CSS辞典≫線の種類 border-style

線の種類 border-style

≪ 背景に画像 background	【 HOME 】	線の太さ border-width ≫

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

≪ 背景に画像 background	【 HOME 】	線の太さ border-width ≫

練習用書き込みフォーム（サンプル表示）
<div style="border-style: solid;">ホームページの素材屋です</div><br /> <div style="border-style: double;">ホームページの素材屋です</div><br /> <div style="border-style: groove;">ホームページの素材屋です</div><br /> <div style="border-style: ridge;">ホームページの素材屋です</div><br /> <div style="border-style: inset;">ホームページの素材屋です</div><br /> <div style="border-style: outset;">ホームページの素材屋です</div><br /> <div style="border-style: dashed;">ホームページの素材屋です</div><br /> <div style="border-style: dotted;">ホームページの素材屋です</div><br /> <div style="border-top-style: double;">ホームページの素材屋です</div><br /> <div style="border-style: dotted solid;">ホームページの素材屋です</div><br />

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

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

線の種類 border-style