スタッフブログ

31 枠線の太さを変える

2014/04/11 HTML

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(左)を値に入れると、上下左右で個別に枠線の太さを指定出来る。

本間 隆之が書いた記事

新着情報

スタッフブログ

ご相談・
お問い合わせ