HTML STUDY
>
>

枠線の種類

ここではCSSで枠線の種類を指定していきます。枠線の種類として、実線、点線、破線などがあり、各辺を個別に設定することも可能です。まとめて各辺の色、種類、太さを設定する場合はCSSプロパティ「border」で設定します。

border-style

CSSプロパティborder-styleを設定して枠線の種類を変更してみましょう。border-styleに入力する値として以下のようなものがあります。

border-styleの値解説
solid実線
dotted点線
dashed破線
double二重線
none線なし
groove刻まれているような線
ridge飛び出てるような線
inset凹んでいるような線
outset線の内側が出ているような線

枠線の種類を個別で設定する場合はborder- -styleの間にtop,right,bottom,leftを入力してそれぞれを設定します。

枠線の太さをborder-widthで、色をborder-colorで設定しています。またdisplayでdiv要素が横並びになるように設定しています。

要素解説
<div>コンテンツをグループ化
CSSプロパティ解説
border-style枠線の種類を上下左右まとめて設定
border-top-style枠線上部の種類
border-right-style枠線右の種類
border-bottom-style枠線下部の種類
border-left-style枠線左の種類

HTMLコード記述例

<div class="b-sample1">枠線いろいろ</div>
<div class="b-sample2">枠線dridge</div>
<div class="b-sample3">枠線inset</div>

外部ファイルCSS記述例

@charset "utf-8";

div.b-sample1 {
 border-top-style: solid;
 border-right-style: dotted;
 border-bottom-style: dashed;
 border-left-style: double;
 border-width: 5px;
 border-color: red;
 margin-right: 10px;
 width: 150px;
 height: 150px;
 display: inline-block;
}

div.b-sample2 {
 border-style: ridge;
 border-width: 5px;
 border-color: orange;
 margin-right: 10px;
 width: 150px;
 height: 150px;
 display: inline-block;
}

div.b-sample3 {
 border-style: inset;
 border-width: 5px;
 border-color: yellow;
 width: 150px;
 height: 150px;
 display: inline-block;
}

ブラウザ表示例

枠線いろいろ
枠線dridge
枠線inset

スポンサードリンク

CSS枠線 関連記事