辺ごとに一括指定

辺ごとに一括指定【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: #cc0000 5px solid」とすると、全ての辺の一括指定になります。（下記参照）

Beautiful Rose

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
値	機能	例

AICHAN WEB(Z) > HTML＆CSSサンプル集(S) > CSS - 辺ごとに一括指定