概要

border は、HTML要素の枠線を設定するためのCSSプロパティです。 色、太さ、スタイルを自由に指定でき、要素の区切りや装飾、視認性の向上などに使われます。

基本的な使い方

See the Pen marginについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 単純な枠線 */
border: 1px solid #333;

/* 方向別に指定 */
border-top: 2px dashed red;
border-right: 3px dotted blue;
border-bottom: 4px double green;
border-left: 5px groove gray;

/* 色だけ変える */
border-color: #ff0000;

/* 枠線のスタイル指定 */
border-style: solid;

/* 枠線の太さだけ変更 */
border-width: 2px;

/* ショートハンド（太さ スタイル 色） */
border: 2px dashed #000;

border は、太さ（border-width）、スタイル（border-style）、色（border-color）の3要素をまとめて指定できます。 また、上・右・下・左の各方向を個別に設定することも可能です。

出力される内容の例

<div style="border: 2px solid #000;">
  このボックスには2pxの黒い実線の枠があります。
</div>

役割とメリット（定義リスト形式）

要素の視認性向上

枠を付けることで、どこからどこまでが特定のコンテンツか明確にできます。

デザインの一部として活用

ボックスやボタン、カードUIなどにスタイリング要素として利用されます。

区切りや強調

セクション間の区切りや、特定部分の強調表示に効果的です。

柔軟なカスタマイズ

色・スタイル・太さを自由に組み合わせて、細かい表現が可能です。

注意点

• border-style を指定しないと枠線が表示されません（例：border: 2px red; では表示されない）。
• 要素のサイズ（幅・高さ）に影響を与えるため、デザインバランスを確認する必要があります。
• 複数の方向に異なるスタイルを指定すると、見た目に違和感が出ることがあります。

まとめ

border は、要素の枠線を装飾・調整するための基本プロパティです。 枠を付けることで視認性が高まり、UIの見た目にも一貫性が生まれます。色やスタイルの自由度も高く、ボタン・カード・ボックスなど多くの要素に活用される重要なスタイル指定です。