メニュー

WEBページに線を描くCSSのborderプロパティの使い方

HTML
当ページのリンクには広告が含まれています。
html
  • URLをコピーしました！
生徒

CSSのborderプロパティの使い方が覚えられません

先生

CSSのborderプロパティの書き方を説明します

目次

HTML要素の枠線はCSSのbordaerプロパティで書く

WEBページのHTML要素に枠線や罫線を書いて装飾するには、CSSのborderプロパティで線の位置や形状、色などを指定します。

この記事で分かること
  • CSSのborderプロパティの書き方
  • CSSのborderプロパティで書ける線の種類

border-styleは線の形を指定

border-styleプロパティを使用すると、境界線のスタイル（形状）を指定することができます。

指定できるスタイルの一覧は以下になります。

設定値説明
none（初期値）線無し優先度が低く別のborder-styleが設定されとnoneは無視される
hidden線非表示優先度が高く別のborder-styleが設定されていても非表示になる
dotted点線丸の点線
dashed破線四角の破線
solid実線シンプルな線
double2本線二重線
groove凹の形の線窪んで見える線
ridge凸の形の線盛り上がって見える線
inset中が凹に見える線内側が窪んで見える線
outset中が凸に見える線内側が盛り上がって見える線

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

boder-styleの初期値はnoneです。そのためborder-widthやborder-colorを指定してもborder-styleが指定されていないと線は表示されません。

同じ場所に線が複数ある場合

同じ位置の線は、表(table)内の隣り合ったセルの接する線を指します。

tableのborder-collapseプロパティがcollapseの場合、tableの隣り合ったセルの接する枠線は同じ位置に描画されます。

border-style は以下の4つのプロパティを一括で指定する時に使用します。

  • border-top-style（上の枠線）
  • border-right-style（右の枠線）
  • border-bottom-style（下の枠線）
  • border-left-style（左の枠線）

border-styleは4方向の線全てに同じ指定をする場合だけでなく、以下のように方向ごとに線のスタイルを変えることもできます。

一括で指定する例説明個別で指定する場合
border-style: solid;4方向ともsolidborder-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-style: solid dotted;上下はsolid
左右はdotted		border-top-style: solid;
border-right-style: dotted;
border-bottom-style: solid;
border-left-style: dotted;
border-style: solid dotted dashed;上はsolid
左右はdotted
下はdouble		border-top-style: solid;
border-right-style: dotted;
border-left-style: double;
border-style: solid dotted dashed double;上はsolid
右はdotted
左はdashed
下はdouble		border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;

See the Pen border by mik20621 (@mik20621) on CodePen.

これ以外のパターンで方向別の線を描きたい時は、border-styleではなくborder-top-styleなどで各方向ごとに個別に指定する必要があります。

border-color 線の色を指定

border-colorは要素の境界線の色を指定するプロパティです。

以下の4つのプロパティを一括して指定することができます。

  • border-top-color（上の枠線の色）
  • border-right-color（右の枠線の色）
  • border-bottom-color（下の枠線の色）
  • border-left-color（左の枠線の色）
例説明個別に指定する場合
border-style: red;4方向とも赤border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
border-style: red blue;上下は赤、左右は青border-top-color: red;
border-right-color: blue;
border-bottom-color: red;
border-left-color: blue;
border-style: red blue purple;上は赤、左右は青、下は紫border-top-color: red;
border-right-color: blue;
border-bottom-color: purple;
border-style: red blue purple green;上は赤、右は青、下は紫、左は緑border-top-color: red;
border-right-color: blue;
border-bottom-color: purple;
border-left-color: green;

See the Pen border-style by mik20621 (@mik20621) on CodePen.

border-width 線の太さを指定

border-widthプロパティは境界線の太さを指定します。

以下の4つのプロパティを一括して指定することができます。

  • border-top-width（上の枠線の幅）
  • border-right-width（右の枠線の幅）
  • border-bottom-width（下の枠線の幅）
  • border-left-width（左の枠線の幅）
例説明個別に指定する場合
border-width: 1px;4方向とも1pxborder-top-color: 1px;
border-right-color: 1px;
border-bottom-color: 1px;
border-left-color: 1px;
border-style: 1px 2px;上下は1px、左右は2pxborder-top-color: 1px;
border-right-color: 2px;
border-bottom-color: 1px;
border-left-color: 2px;
border-style: 1px 2px 3px;上は1px、左右は2px、下は3pxborder-top-color: 1px;
border-right-color: 2px;
border-bottom-color: 3px;
border-left-color: 2px;
border-style: 1px 2px 3px 4px;上は1px、右は2px、下は3px、左は4pxborder-top-color: 1px;
border-right-color: 2px;
border-bottom-color: 3px;
border-left-color: 4px;

See the Pen border-style-multi by mik20621 (@mik20621) on CodePen.

borderプロパティは一括で指定

borderプロパティで、上で説明した以下の3つのスタイルを一括で指定することができます。

  • border-color
  • border-style
  • border-width

4辺全てを同じ色、同じスタイルにする場合にのみborderで一括指定することができます。辺ごとに変えたい場合はborder-topやboder-bottomなどで個別に指定する必要があります。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

border-radius プロパティは半径を指定

border-radiusプロパティは4隅の半径のサイズを指定します。

border-radiusプロパティは、1から4個の値を指定して以下のように設定します。

例説明個別に指定する場合
border-radius: 25px;4隅とも25px
border-radius: 50% 25%;左上と右下は50%、右上と左下は25%
border-radius: 20px 30px 10px左上は20px、右上と左下は30px、右下は10px
border-radius: 10px 40px 20px 30px左上は10px、右上は40px、右下は20px、左下は30px

スラッシュで区切ると角の両側のサイズを指定できる

スラッシュ/で区切ることで、半径を2つに分けて、横方向の半径サイズ / 縦方向の半径サイズを指定できます。

各角の水平方向と垂直方向に対して異なるサイズを指定できます。

少し分かりにくいですが、スラッシュ/の前では各角の水平方向のサイズを指定して、/の後では各角の垂直方向のサイズを指定します。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

HTML
よかったらシェアしてね！
  • URLをコピーしました！
目次