css border

ボーダーの記述方法のみ掲載します。
注意点やボーダーによるレイアウトのズレの問題はポイント!特集

border

borderにはwidth(幅)・color(色)・style(スタイル)・を四辺のどこに適応するかを指定します。

四辺の設定

top・right・bottom・leftを指定し、どの辺にwidth(幅)・color(色)・style(スタイル)
を適応するかを指定します。
指定なしは四辺すべてに適応されます。

width

borderの幅を指定します。
数値は様々ありますが今回は一般的なpxでご紹介します。

{ border-width:1px; } 四辺に1px
{ border-width:1px 5px; } 上下1px 左右5px
{ border-width:1px 5px 10px 15px; } 上1px 右5px 下10px 左15px

color

borderに色をつけます
記述方法は { border-color:#ff0000; } です。
widthと同じく、上下左右指定も可能です。

style

borderの線の種類を指定します。
指定なし=sytle:none; 既定値ではborder無しとなります。

{ border-style:solid; }
{ border-style:dotted; }
{ border-style:double; }
{ border-style:groove; }
{ border-style:ridge; }
{ border-style:inset; }
{ border-style:outset; }
{ border-style:dashed; }

まとめ

記述方法の色々

.p {
  width:500px;
  border:2px #ff0000 dotted;
  }
<p>1つにまとめる記述</p>
1つにまとめる記述
.p {
  width:500px;
  border-width:0px 0px 3px 8px;
  border-left-color:#000000;
  border-bottom-color:#999999;
  border-left-style:solid;
  border-bottom-style:double;
  }
<p>バラバラに記述</p>
バラバラに記述