スタイルシート［CSS］

枠線のスタイルを指定する - IENN
● 意識調査：スタイルシートの導入について
サイト内検索 Google
border-style: ***; border-***-style: ***;

border-style と border-***-style は、枠線の種類を指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。

border-style … 上下左右をまとめて指定します。
border-***-style … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）

【枠線の種類】

solid（普通の線）

double（二重の線）

groove（谷型の線）

ridge（山型の線）

inset（凹型）

outset（凸型）

dotted（点線）　IE5.5以上とNN6以上で対応

dashed（大きい点線）　IE5.5以上とNN6以上で対応

none（線なし）デフォルト

border-style … 上下左右をまとめて指定するIENN

border-style 枠線の種類を指定します

【指定方法】

border-style: solid; … ［上下左右］ を指定
border-style: dashed double; … ［上下］ と ［左右］ を指定
border-style: dashed double dotted; … ［上］ と ［左右］ と ［下］ を指定
border-style: solid dashed double dotted; … ［上］ と ［右］ と ［下］ と ［左］ を指定

上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。

border-***-style … 上下左右を個別に指定するIENN6

border-top-style 上の枠線を指定します
border-right-style 右の枠線を指定します
border-bottom-style 下の枠線を指定します
border-left-style 左の枠線を指定します

掲載スタイル一覧 ｜ スタイルシートの基本 ｜ トレーニング ｜ スタイルシート質問板

　使用例

点線タイプの枠線

上下左右に異なる種類を指定

点線タイプの枠線を指定します

・これをブラウザで見ると次のように表示されます。

点線タイプの枠線

上下左右に異なる種類を指定
点線タイプの枠線を指定します

■タグに直接指定する場合

上下に点線、左右に二重線

ボックスTOP
関連ページ
スタイルシート - 枠線の設定をひとまとめに行う

枠線の設定をひとまとめに行う - IENN
● 意識調査：スタイルシートの導入について
サイト内検索 Google
border: ***; border-***: ***;

border と border-*** は、枠線の太さ、色、種類をひとまとめに指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。

border … 上下左右をまとめて指定します。
border-*** … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）

border … 上下左右をまとめて指定するIENN

border 枠線（太さ、色、スタイル）を指定します

【指定内容】

border: thick red solid ;

太さ 色 スタイル

それぞれの値は、半角スペースで区切って記述します。
記述する順番は自由で、必要のない指定は省くこともできます。

※省いた部分はデフォルトが適用されます。枠線を表示する場合には、スタイルの指定は省かないようにします（デフォルトが none なので）。

border-*** … 上下左右を個別に指定するIENN6

border-top 上の枠線（太さ、色、スタイル）を指定します
border-right 右の枠線（太さ、色、スタイル）を指定します
border-bottom 下の枠線（太さ、色、スタイル）を指定します
border-left 左の枠線（太さ、色、スタイル）を指定します

指定内容は、border と同じです。

　使用例

上下左右に異なる枠線を指定

赤い点線を指定

赤い点線タイプの枠線を指定します

・これをブラウザで見ると次のように表示されます。

上下左右に異なる枠線を指定

赤い点線を指定
赤い点線タイプの枠線を指定します

■タグに直接指定する場合

赤い点線の枠を指定

ボックスTOP
関連ページ
スタイルシート - 枠線の太さを指定する
スタイルシート - 枠線の色を指定する
スタイルシート - 枠線のスタイルを指定する

border-width と border-***-width は、枠線の太さを指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。

border-width … 上下左右をまとめて指定します。
border-***-width … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）

【太さの指定】

枠線の太さは、次の値で指定します。

数値+単位（px、他）

thin … 細い線
medium … 中間の太さ（デフォルト）
thick … 太い線

border-width … 上下左右をまとめて指定する

border-width 枠線の太さを指定します

【指定方法】

border-width: 5px; … ［上下左右］ を指定
border-width: 5px 10px; … ［上下］ と ［左右］ を指定
border-width: 5px 10px 15px; … ［上］ と ［左右］ と ［下］ を指定
border-width: 5px 10px 15px 20px; … ［上］ と ［右］ と ［下］ と ［左］ を指定

上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。

border-***-width … 上下左右を個別に指定する

border-top-width 上の枠線を指定します
border-right-width 右の枠線を指定します
border-bottom-width 下の枠線を指定します
border-left-width 左の枠線を指定します

　使用例

細い枠線

上右は枠線なし、下に3px、左に10pxの枠線

細い枠線を指定します

・これをブラウザで見ると次のように表示されます。

細い枠線

上右は枠線なし、下に3px、左に10pxの枠線
細い枠線を指定します

■タグに直接指定する場合

上下に太い枠線、左右に細い枠線

ボックスTOP
関連ページ
スタイルシート - 枠線の設定をひとまとめに行う

border-color と border-***-color は、枠線の色を指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。

border-color … 上下左右をまとめて指定します。
border-***-color … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）

【色の指定】

色の指定についてはスタイルシートの色指定をご覧ください。

border-color … 上下左右をまとめて指定するIENN

border-color 枠線の色を指定します

【指定方法】

border-color: #85B9E9; … ［上下左右］ を指定
border-color: #85B9E9 #BDE9BA; … ［上下］ と ［左右］ を指定
border-color: #85B9E9 #BDE9BA #FFD37D; … ［上］ と ［左右］ と ［下］ を指定
border-color: #85B9E9 #BDE9BA #FFD37D #D1D1D1; … ［上］ と ［右］ と ［下］ と ［左］ を指定

上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。

border-***-color … 上下左右を個別に指定するIENN6

border-top-color 上の枠線を指定します
border-right-color 右の枠線を指定します
border-bottom-color 下の枠線を指定します
border-left-color 左の枠線を指定します

　使用例

赤い枠線

上下左右に異なる色を指定

赤い枠線を指定します

・これをブラウザで見ると次のように表示されます。

赤い枠線

上下左右に異なる色を指定
赤い枠線を指定します

■タグに直接指定する場合

上下に赤い枠線、左右に青い枠線

ボックスTOP

www.tagindex.com/stylesheet/box/border_style.html