HTMLで要素に枠をつける方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLで要素に枠をつける方法について、実線と点線、角丸の枠に分け、簡単に解説していきます。

実線の枠のつけ方

実線の枠をつけるには、スタイルのborderプロパティを指定します。

borderプロパティの値には、枠のサイズとスタイル、色を順不同で指定する必要があります。

<div style="width:200px;height:200px;border:1px solid #000000;"></div>

上記のコードでは、幅200ピクセルと高さ200ピクセルのdiv要素に、1ピクセルの実線の黒色の枠をつけています。

点線の枠のつけ方

点線の枠をつける際も、スタイルのborderプロパティを指定する必要があります。

点線の枠では、borderプロパティの値の枠のスタイルはdashed(点線)やdotted(細かい点線)を指定します。

<div style="width:200px;height:200px;border:1px dashed #000000;"></div>

上記のコードでは、幅200ピクセルと高さ200ピクセルのdiv要素に、1ピクセルの(細かくない)点線の黒色の枠をつけています。

角丸の枠のつけ方

角丸の枠をつける場合は、スタイルのborderプロパティの他、border-radiusプロパティも使います。

border-radiusプロパティの値には、角丸の度合いをピクセル単位で指定し、borderプロパティの値はこれまで同様です。

<div style="width:200px;height:200px;border:1px solid #000000;border-radius:5px;"></div>

上記のコードでは、幅200ピクセルと高さ200ピクセルのdiv要素に、1ピクセルの実線の黒色の枠を、角丸付きで表示しています。