枠線をまとめて設定する

ここでは枠線の種類、太さ、色をまとめて設定するCSSプロパティborderについて解説していきます。枠線をそれぞれ個別に設定することもでき、枠線の種類も豊富です。

border

CSSプロパティborderは枠線の種類（border-style）・太さ（border-width）・色（border-color）をまとめて設定します。入力する値の順番は関係ありませんので自由に入力することが可能です。

要素	解説
<div>	コンテンツをグループ化

CSSプロパティ	解説
border	枠線の種類・太さ・色を設定

HTMLコード記述例

<div class="border-sample">
<p>枠線の種類・太さ・色を設定しています。</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.border-sample {
 border: 5px dotted red;
 padding: 10px;
 width: 150px;
 height: 150px;
}

ブラウザ表示例

枠線の種類・太さ・色を設定しています。

枠線の種類・太さ・色についての詳しい解説は下の一覧からご確認ください。また各辺を個別に設定することも可能です。