CSSで枠線（ボーダー）の設定方法を覚えよう

borderとは

borderプロパティとは、要素の枠線のスタイル・太さ・色を変更するためのプロパティです。

また、上下左右の値を別々に設定することもできます。

borderの設定方法

borderプロパティは下記のように指定します。

{border: 太さの値 スタイルの値 色の値;}

また、上下左右で別々の値を設定したい場合は、プロパティ名に「border-left、border-right、border-top、border-bottom」を用います。

ボーダーの太さ

ボーダーの太さを設定するには、数値（px、em）で指定します。

{border: 3px スタイルの値 色の値;}

また、予め決められたキーワードで指定する方法があります。

値にはthin（細い）、medium（普通）、thick（太い）を用いることができ、それぞれブラウザによって太さは異なります。通常は、数値で指定するのが一般的です。

ボーダーのスタイル

ボーダーのスタイルは、下記の中から用いることができます。

それぞれブラウザで確認してみましょう。

使用例：CSS

{border: 3px solid #000;}
{border: 3px double #000;}
{border: 3px groove #000;}
{border: 3px ridge #000;}
{border: 3px inset #000;}
{border: 3px outset #000;}
{border: 3px dashed #000;}
{border: 3px dotted #000;}

使用例：ブラウザ

ボーダーの色

ボーダーの色はカラーコードやカラーネームで指定します。

{border: 太さの値 スタイルの値 #000000 or red;}

また、transparentを指定すると透明になります。

ボーダーを角丸にする

ボーダーを角丸にするには、border-radiusプロパティを使用します。

{border-radius: 数値;}

また、上下左右を別々の値にする場合は、このように指定します。

{border-radius: 左上の値 右上の値 右下の値 左下の値;}

さらに、それぞれの水平方向の形状と垂直方向の形状を別々に指定することもできます。指定するには「水平方向の値/(スラッシュ)垂直方向の値」と指定します。

{border-radius: 水平方向左上の値 水平方向右上の値 水平方向右下の値 水平方向左下の値/垂直方向左上の値 垂直方向右上の値 垂直方向右下の値 垂直方向左下の値;}

使用例：CSS

{border-radius: 25px 50px 100px 50px/50px 25px 50px 100px;}

理解するポイントまとめ

• borderプロパティとは、要素の枠線のスタイル・太さ・色を変更するためのプロパティです。
• borderプロパティは、上下左右の値を別々に設定することもできます。
• border-radiusは角丸を指定するためのプロパティです。