ボーダーの設定方法

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

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

ボーダーの線種設定

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

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

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

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

div.sample{border: solid;}

ボーダーの太さ設定

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

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

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

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

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

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

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

ボーダーの色設定

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

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

div.sample{border-color: red;}

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

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

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

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

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

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

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

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

みいと

Contact

興味を持ったものをいろいろと勉強しています。