zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 要素に枠線(ボーダー)をつける方法まとめ

CSSで要素に枠線(ボーダー)をつける方法をまとめて紹介します。

以下のように、border: 種類 太さ 色;の形式で指定します。

<div style="border: solid 1px red;">
  テキスト
</div>
<div style="border: dotted 3px blue;">
  テキスト2
</div>
<div style="border: double 5px #000;">
  テキスト3
</div>

また、border-上下左右で上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。

<div style="border-top: solid 1px red;">
  テキスト
</div>
<div style="border-left: dotted 3px blue;">
  テキスト2
</div>
<div style="border-bottom: double 5px #000;">
  テキスト3
</div>

枠線の種類

枠線の種類には、以下があります。

solid
1本線で表示
double
2本線で表示
dashed
破線で表示
dotted
点線で表示
ridge
浮き出た線で表示
groove
凹んだ線で表示
inset
凹んだように表示
outset
浮き出たように表示
none
表示しない

border-styleで枠線の種類のみを設定できます。

また、border-上下左右-styleで上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。

枠線の色

文字の色はredblueのようにすでに定義された色かもしくは、色コードで指定します。

色コードとは#AB3F7Cのように、先頭の#のあとに16進数の文字を6桁指定します。

先頭から2文字が赤、真ん中の2文字が緑、末尾の2文字が青の値に対応しています。

赤緑青をそれぞれ00(暗)〜FF(明)の値で指定します。

border-colorで枠線の色のみを設定できます。

また、border-上下左右-colorで上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。

枠線の太さ

border-widthで枠線の色のみを設定できます。

また、border-上下左右-widthで上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。



関連記事