CSS「border」プロパティの使い方を解説

CSS「border」プロパティの使い方を解説

「border」プロパティは、CSSで枠線(ボーダー)を表示できるプロパティです。囲み枠(ボックス)を表示する時などに使います。

この記事では、使い方やコードの書き方について説明します。

 

borderプロパティの書き方

はじめに、borderプロパティの書き方について見て

基本的なコードの書き方は以下のとおりです。

border: width style color;

具体的には、以下のように記述します。

border: 1px solid #55A5FF;

「border」は、枠線の幅や種類、色を一度に指定することができるプロパティです。

つまり、「border: width style color;」という形で記述し、枠線の「幅」「スタイル」「カラー」を指定します。

たとえば、上に書いたコードを例にすると、「線の幅:3px」「線のスタイル: 実線」「カラー:#55A5FF」を指定しているので、以下のような枠線を表示することが可能です。

borderプロパティ

線の幅は、上記では「数値+px」を使っていますが、「thin(細いボーダー)」「thick(太いボーダー)」などの値でも指定できます。

線のスタイルは、上記の「solid(実線)」以外に、「dotted(点線)」「dashed(破線)」「double(二重線)」などの値を使うことが可能です。

 

記述・表示例

次に、borderプロパティの使用例や表示例について説明します。

borderプロパティを使って、以下のような囲み枠を表示をすることが可能です。

<div  class="border"> 
borderプロパティの表示例
</div>

 

直線

要素の周りに実線の囲み枠を表示します。

borderプロパティの表示例
.border {
border: 3px solid #55A5FF;
}

 

点線

点線の囲み枠を表示します。

borderプロパティの表示例
.border { 
border: 3px dotted #55A5FF; 
}

 

破線

破線の囲み枠を表示します。

borderプロパティの表示例
.border { 
border: 3px dashed #55A5FF; 
}

 

二重線

二重線の囲み枠を表示します。

borderプロパティの表示例
.border { 
border: 3px double #55A5FF; 
}

 

全体が浮き出るような囲み枠

ボックス全体が浮き出るように表示される囲み枠を表示します。

スタイルに「outset」を指定すると、右と下の線が暗くなり、全体が浮き出て見える囲み枠を表示できます。

点線の囲み枠
.border { 
border: 3px outset #DFF6F0;
}

 

全体が窪んでいるような囲み枠

ボックス全体が窪んで見える囲み枠を表示します。

スタイルに「inset」を指定すると、「outset」とは逆に、左側と上の線が暗くなり、全体が窪んで見える囲み枠を表示できます。

点線の囲み枠
.border { 
border: 3px inset #DFF6F0;
}

 

線が浮き出るような囲み枠

線が浮き出るように表示される囲み枠を表示します。

点線の囲み枠
.border { 
border: 3px ridge ##55a5ff;
}

 

窪んだ線を表示する囲み枠

窪んだ線を表示する囲み枠を表示します。

点線の囲み枠
.border { 
border: 3px groove #55a5ff;
}

 

まとめ

以上、「border」プロパティの使い方について説明しました。

borderプロパティは、「線の幅」「スタイル」「色」をまとめて指定することができます。

さまざまな囲み枠のデザインに使うことができるので、記事の中で強調したいところなどに使う時に参考にしてみてください。

cssの書き方カテゴリの最新記事