枠線のスタイルを個別指定 【border-bottom-style、border-bottom-style、border-left-style、border-right-style】

※ブラウザで表示した時の見え方

Beautiful Rose

Beautiful Rose

Beautiful Rose

※ソースサンプル

【CSS】
h2 {
border-color: #009933;
}
h2#sample1 {
border-bottom-style: dashed;
color: #009933
}
h2#sample2 {
border-bottom-style: double;
}
h2#sample3 {
border-top-style: dotted;
border-bottom-style: dotted;
}
【HTML】
<h2 id="sample1">Beautiful Rose</h2>

<h2 id="sample2">Beautiful Rose</h2>

<h2 id="sample3">Beautiful Rose</h2>

[ 黒※説明中のタグ 紫※省略可能なタグ 赤※変更可能 緑※文章など ]

※解説

オプション
hidden表示しないborder-bottom-style: hidden
solid一本の線で表示するborder-bottom-style: solid
double二本の線で表示するborder-bottom-style: double
grooveへこんだ感じに表示する border-bottom-style: groove
ridge飛び出して見えるように表示するborder-bottom-style: ridge
inset枠の内側がへこんだ風に表示するborder-bottom-style: inset
outset枠の内側が飛び出して見えるように表示するborder-bottom-style: outset
dashed破線で表示するborder-bottom-style: dashed
dotted点線で表示するborder-bottom-style: dotted
機能