border-style/枠線の種類

border-styleプロパティを使うと枠線の種類を指定出来ます。

説明

 border-styleプロパティは枠線の種類を上下左右一括で設定出来ます。border-top-styleは上の枠線の種類、border-right-styleは右、border-bottom-styleは下、border-left-styleは左の枠線の種類の設定になります

border-style説明

構文

 border-styleプロパティの構文は以下の通りです。

border-style: 枠線の種類;

 border-top-styleプロパティの構文は以下の通りです。

border-top-style: 枠線の種類;

 border-right-style、border-bottom-style、border-left-styleも同様です。

 枠線の種類は以下の10個から指定出来ます。

【枠線の種類】
種類 表示
solid 実線
dotted 点線
dashed 破線
double 二重線
groove 谷型
ridge 山型
inset 左と上が濃い
outset 右と下が濃い
hidden 非表示
none なし(デフォルト)

border-style利用例

 border-styleの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
border-style: solid;
}

<div>solid例</div>

 上記を表示すると以下になります。尚、分かり易いようにborder-widthで枠線の太さを10pxに指定しています。

solid例

 上記のように実線で表示されます。

 dottedを指定すると点線で表示されます。

dotted例

 dashedを指定すると破線で表示されます。

dashed例

 doubleを指定すると二重線で表示されます。

double例

 grooveを指定すると谷型で表示されます。

groove例

 ridgeを指定すると山形で表示されます。濃淡がgrooveと逆になっています。

ridge例

 insetを指定すると左と上が濃くなります。

inset例

 outsetを指定すると右と下が濃くなり、insetと逆になります。

outset例

 hiddenは非表示ですが、基本noneと同じです。

hidden例

 noneはデフォルトで枠線がありません。

none例

border-top-style利用例

 border-top-styleの利用例は以下の通りです。

div {
border-top-style: solid;
}

<div>solid例</div>

 上記を表示すると以下になります。

solid例

 上だけ実線で表示されます。

 上の線だけ変えたい、上下左右個別に指定した時等に使います。

 border-right-style、border-bottom-style、border-left-styleについても同様の利用が出来ます。

関連ページ

・ホームページ作成「ボックスのまとめ

 borderだけでなく、背景、余白、幅、回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)