Perl Web開発者のHTML・CSS入門

border - ボーダーを設定する - CSS入門【CSS3対応】

ボーダーを設定するには、スタイルシート(CSS)でborderを指定します。borderには、ボーダーの太さ、ボーダーの種類、色を空白で区切って指定します。

<div style="border:1px solid #ddd;">
  ボーダー
</div>

solidは、1本線を表すボーダーの種類の指定です。

ボーダーの種類は、HTMLクイックリファレンスが参考になります。

border-style - ボーダーのスタイルを指定する - HTMLクイックリファレンス

ボーダーの内側に適切にパディングを設定する

ボーダーの内側に適切にパディングを設定してみましょう。

ボーダーの位置を指定する

「border-top」「border-bottom」「border-left」「border-right」を使用すると、一つの側だけにボーダーを設定することができます。

<div style="border-top:1px solid blue;margin-bottom:10px;background:#eee;">
  ボーダー上
</div>

<div style="border-bottom:1px solid blue;margin-bottom:10px;background:#eee;">
  ボーダー下
</div>

<div style="border-left:1px solid blue;margin-bottom:10px;background:#eee;">
  ボーダー左
</div>

<div style="border-right:1px solid blue;margin-bottom:10px;background:#eee;">
  ボーダー右
</div>

組み合わせることもできます。

<div style="border-top:1px solid blue;border-bottom:1px solid blue;margin-bottom:10px;background:#eee;">
  ボーダー上下
</div>