お問い合わせ
  • HTML

31 枠線の太さを変える

border-widthプロパティ

枠線の太さを変更するには、border-widthプロパティを使用します。値の指定は「px」「%」「em」などを使います。

border-widthプロパティ1

h1要素の枠線を細くして太さ1pxの実線にするために、以下のように記述します。

border-widthプロパティ2

HTMLファイルを上書き保存して、ブラウザで開くとh1要素の回りに1pxの実線が表示されているはずです。

上下左右で枠線の太さを変える

上下左右で個別に枠線の種類を指定する場合は、

  • border-top-widthプロパティ(上)
  • border-right-widthプロパティ(右)
  • border-bottom-widthプロパティ(下)
  • border-left-widthプロパティ(左)

を使用します。各プロパティで使用出来る枠線の種類は、border-widthプロパティと同じです。

このページのまとめ

  • border-widthプロパティを使用すると枠線の太さを変更する事が出来る。
  • 値の指定には、「px」「%」「em」を使用する。
  • top(上)、right(右)、bottom(下)、left(左)を値に入れると、上下左右で個別に枠線の太さを指定出来る。

Contact Us

Web制作、Webマーケティング、SFA・MA導入支援に関するお悩みがある方は、お気軽にご相談ください。

お問い合わせ・ご相談

ホームページ制作、マーケティングにおける
ご相談はお気軽にご連絡ください。

資料請求

会社案内や制作事例についての資料を
ご希望の方はこちらから。

お電話でのお問い合わせ

お電話でのご相談も受け付けております。

※コールセンターに繋がりますが、営業時間内は即日
担当より折り返しご連絡をさせて頂きます。