CSS

ボーダーの設定方法

みいと

ボーダーの線種、太さ、色の設定方法

ボーダーは線種、太さ、色を上下左右それぞれに対して設定することができます。

ボーダーの線種設定

ボーダーの線種を設定するには下記のプロパティを使用します。

border-style ボックスの上下左右のボーダーの線種を設定できます。
border-top-style ボックスの上のボーダーの線種を設定できます。
border-bottom-style ボックスの下のボーダーの線種を設定できます。
border-left-style ボックスの左のボーダーの線種を設定できます。
border-right-style ボックスの右のボーダーの線種を設定できます。

値には下記のキーワードを設定します。

none ボーダーを非表示にします。
table要素と線種が競合した場合は他の値が優先されます。
hidden ボーダーを非表示にします。
table要素と線種が競合した場合はこの値が最優先されます。
solid 実線
solid
double 二重線
double
dotted 点線
dotted
dashed 破線
dashed
groove 溝っぽい線
groove
ridge 盛り上がって見える線
ridge
inset 内側が低く見える線
inset
outset 内側が高く見える線
outset

実際の使用例は下記のようになります。

div.sample{border: solid;}

ボーダーの太さ設定

ボーダーの太さを設定するには下記のプロパティを使用します。

border-width ボックスの上下左右のボーダーの太さを設定できます。
border-top-width ボックスの上のボーダーの太さを設定できます。
border-bottom-width ボックスの下のボーダーの太さを設定できます。
border-left-width ボックスの左のボーダーの太さを設定できます。
border-right-width ボックスの右のボーダーの太さを設定できます。

単位付きの数値とキーワードが指定できます。
キーワードは下の表の3つがあります。

thin 細い線
thin
medium 普通の線
medium
thick 太い線
thick

実際の使用例は下記のようになります。

div.sample{border-width: 1px;}

単位付きの数値についてはこちらの記事で説明しています。

ボックスの構造
ボックスの構造マージン、ボーダー、パディングなど、ボックスの構造についてザックリまとめました。...

ボーダーの色設定

ボーダーの色を設定するには下記のプロパティを使用します。

border-color ボックスの上下左右のボーダーの色を設定できます。
border-top-color ボックスの上のボーダーの色を設定できます。
border-bottom-color ボックスの下のボーダーの色を設定できます。
border-left-color ボックスの左のボーダーの色を設定できます。
border-right-color ボックスの右のボーダーの色を設定できます。

実際の使用例は下記のようになります。

div.sample{border-color: red;}

色の指定方法はこちらの記事でまとめています。

色の指定方法
CSSの色の指定方法CSSの色の指定方法をザックリとまとめました。...

線種・太さ・色の一括設定

ボーダーの線種、太さ、色を一括で設定するには下記のプロパティを使用します。

border ボックスの上下左右のボーダーの線種・太さ・色を設定できます。
border-top ボックスの上のボーダーの線種・太さ・色を設定できます。
border-bottom ボックスの下のボーダーの線種・太さ・色を設定できます。
border-left ボックスの左のボーダーの線種・太さ・色を設定できます。
border-right ボックスの右のボーダーの線種・太さ・色を設定できます。

線種、太さ、色は半角スペースで区切って、必要なものだけを順不同で指定することができます。

div.sample{border: solid 1px red;}

ボーダーの設定方法のまとめ

今回はボーダーの設定方法をまとめました。
基本的には線種・太さ・色を一括で設定するプロパティを使うことができれば問題ないと思います。

まとめ

  • ボーダーには線種、太さ、色を設定できる
  • ボーダーは上下左右それぞれに対して設定できる
  • 線種、太さ、色を一括で設定するプロパティでは順不同で必要なものだけ指定すればよい

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました