辺ごとに一括指定 【border-top、border-bottom、border-left、border-right】

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

Beautiful Rose

※ソースサンプル

【CSS】
h2 {
border-left: #cc0000 10px solid;
border-bottom: #cc0000 2px solid;
font-family: Courier;
padding-left: 5px
}
【HTML】
<h2>Beautiful Rose</h2>

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

※解説

border-color
#RRGGBB色を16進数で2桁ずつ指定するborder-top-color: #993300
#RGB色を16進数で1桁ずつ指定するborder-top-color: #f00
rgb(R,G,B)各色を10進数で指定するborder-top-color: #rgb(0,0,255)
rgb(R%,G%,B%)各色を%で指定するborder-top-color: #rgb(0%,50%,100%)
カラーネーム定義されている色名で指定するborder-top-color: black
transparent色を透明にするborder-top-color: transparent
機能

border-width
px(ピクセル)太さを指定するborder-top-width: 1px
thin細い線を指定するborder-top-width: thin
medium中くらいの線を指定するborder-top-width: medium
thick太い線を指定するborder-top-width: thick
機能

border-style
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
機能