【CSS】borderを使って要素に枠線を引く!

CSSにはborderという要素に線を引くことができるプロパティがあります。

borderプロパティを使用すると、要素に線が追加され、要素ごとにわかりやすく区切ることができ、線の色やの太さ、スタイルもカスタマイズできるようになります。

また、上下左右の四隅のどこかだけ線を追加することも可能であり、線の角を丸くすることもできるので、線をカスタマイズしたい場合はCSSのborderプロパティを使用しましょう。

今回は、CSSのborderプロパティを使って要素に枠線を引く方法について以下の内容で解説していきます。

⚫︎ 線の太さを調整する場合(border-width)
⚫︎ 線の種類を調整する場合(border-style)
⚫︎ 線の色を調整する場合(border-color)
⚫︎ 要素の周りに線を引く場合(boder)
⚫︎ 線の角を丸める場合(border-rudius)

borderとは

borderとは要素の周りに線をつけることができるプロパティとなります。
線をつけることで1つの要素をわかりやすく区切ることができ、線の色やの太さ、スタイルもカスタマイズできるのでデザインに合わせて調整することが可能です。

線の太さを調整する場合(border-width)

border-widthとは線の太さを指定することができるプロパティとなります。

border-widthの書き方

border-widthプロパティの書き方は下記となります。

1つのサイズを指定した場合はすべての辺に同じサイズが適用されます。
また、辺によって太さを変えたい場合は半角スペースで区切り上、右、下、左の順で指定します

border-widthを使ったサンプルコード

border-widthを使ったサンプルコードを紹介していきます。

sample.html

style.css

出力結果

線の種類を調整する場合(border-style)

border-styleとは線の種類を調整することができるプロパティとなります。

border-styleの書き方

border-styleプロパティの書き方は下記となります。

1つのスタイルを指定した場合はすべての辺に同じスタイルが読み込まれます。
辺によってスタイルを変えたい場合は半角スペースで区切って上、右、下、左の順で指定します。

また、border-styleで指定できる値の一覧は下記のようになります。

説明
none 線を非表示にする
solid 1本の実線を表示する
double 2本の実線を表示する
dashed 破線を表示する
dotted 点線を表示する
groove 立体的な谷型の線
ridge 立体的な山型の線
inset 囲まれた部分が凹んで見えるような線を表示する
outset 囲まれた部分が浮き上がって見えるような線を表示する

border-styleを使ったサンプルコード

sample.html

style.css

出力結果

線の色を調整する場合(border-color)

border-colorとは線の色を調整するプロパティとなります。

border-colorの書き方

border-colorプロパティの書き方は下記となります。

一色のみ指定した場合はすべての辺で同じ色が読み込まれます。
辺よって色を変えたい場合は半角スペースで区切って上、右、下、左の順で指定します。

また、border-styleで指定できる値の一覧は下記のようになります。

説明
カラーコード 「#(ハッシュ)」で始まるカラーコードを指定する。
(白色なら#FFFFFF)
RGB値 左から赤、緑、青の値を「,(カンマ)」で区切って指定し、透明度も設定したい場合はrgbaとして赤、緑、青、透明の値を「,(カンマ)」で区切って指定する。
また、透明度は0〜1で指定する。
色名 「white」や「black」など色の名前を指定する。

border-colorを使ったサンプルコード

border-colorを使ったサンプルコードを紹介します。

sample.html

style.css

出力結果

要素の周りに線を引く場合(boder)

borderとは要素の周りに線を引くプロパティとなります。

boderの書き方

boderプロパティの書き方は下記となります。

boderのみ指定するとすべての辺に値が読みまれます。
また、border-topやborder-bottom、border-left、border-rightを使うとどの辺に指定するか設定することができます。

borderを使ったサンプルコード

borderを使ったサンプルコードを紹介します。

style.css

出力結果

線の角を丸める場合(border-radius)

border-radiusとは線の角を丸く調整することができるプロパティとなります。

border-radiusの書き方

boder-radiusプロパティの書き方は下記となります。

1つのスタイルを指定した場合はすべての辺に同じスタイルが読み込まれます。
辺によってスタイルを変えたい場合は半角スペースで区切って上、右、下、左の順で指定します。

また、border-top-left-radiusやborder-top-right-radiusで上の角を、border-bottom-left-radius、border-bottom-right-radiusを使うと下の角の丸みを調整することができます。

border-radiusを使ったサンプルコード

border-radiusを使ったサンプルコードを紹介します。

sample.html

style.css

出力結果

CSSのborder-radiusブロパティについて詳しく知りたい場合はこちらをご参考ください。

今回のポイント

borderで要素の周りに線を引く

⚫︎ CSSで要素に線を引くならborderプロパティを使用する

⚫︎ 線の太さを調整する場合はborder-widthを使用する

⚫︎ 線の太さを調整する場合はborder-widthを使用する

⚫︎ 線の種類を調整する場合はborder-styleを使用する

⚫︎ 線の色を調整する場合はborder-colorを使用する

⚫︎ 要素の周りに線を引く場合はborderを使用する

⚫︎ <線の角を丸める場合はborder-radiusを使用する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し