枠線のスタイル

枠線のスタイル

枠線のスタイルを指定します。

border-width（枠線の幅）

枠線の幅を指定します。「値」は、上、右、下、左の順に記述します。 「値」が１つの場合は「上下左右」が同値、２つの場合は「上下」「左右」が同値と認識します。

サンプル
CSSソース
p{
   border-style: solid;
   border-width: 1px 2px 3px 4px;
}
値/意味/説明
値意味説明
%パーセント
pxピクセルディスプレイの画素数
em要素のフォントサイズに対する相対値
ex要素の小文字の「x」に対する相対値
inインチ1in=2.54cm
cmセンチメートル
mmミリメートル
ptポイント1pt=1/72in
pcパイカ1pc=12pt
thin細い
medium標準（デフォルト）
thick太い

border-style（枠線の形状）

枠線の形状を指定します。「値」は、上、右、下、左の順に記述します。 「値」が１つの場合は「上下左右」が同値、２つの場合は「上下」「左右」が同値と認識します。

サンプル
CSSソース
p{
   border-style: groove ridge inset outset;
   border-width: 5px 5px 5px 5px;
}
値/意味/説明
値意味説明
noneボーダーなしデフォルト
dotted点線
dashed破線
solid１本線
double２本線
groove立体的な凹線
ridge立体的な凸線
inset上左が暗く、下右が明るい線
outset上左が明るく、下右が暗い線

border-color（枠線の色）

枠線の色を指定します。「値」は、上、右、下、左の順に記述します。 「値」が１つの場合は「上下左右」が同値、２つの場合は「上下」「左右」が同値と認識します。

サンプル
CSSソース
p{
   border-color: #ff1493 #33ccff #00ff99 #808080;
   border-style: dotted dashed solid double;
   border-width: 5px 5px 5px 5px;
}
値/意味/説明
値意味説明
transparent透過
RGB値#000000〜#ffffff
色名black、red、grayなど