無料ホームページ作成！ＣＳＳ・スタイルシート
枠線のスタイル

無料ホームページ作成！CSS・ボックス
枠線のスタイル

ホームページのボックスの枠線のスタイルを変える

border-style属性

このborder-style属性はボックスの枠線のスタイルを変更する属性です、初期値が表示しないで宣言されていますので、枠を表示したい場合は必ず宣言しましょう。
宣言の仕方が少々変わってます

• border-style:solid;(上下左右を１本の線)
• border-style:solid double;(上下を１本の線、左右を２本の線)
• border-style:solid double groove;(上を１本の線、左右を２本の線、下をへこんでるような線)
• border-style:solid double groove ridge;(上を１本の線、右を２本の線、下をへこんでるような線、左を飛び出しているような線)
• border-top-style:solid;(上を１本の線)
• border-right-style:solid;(右を１本の線)
• border-bottom-style:solid;(下を１本の線)
• border-left-style:solid;(左を１本の線)

などの使い方ができます。

border-style属性の使い方

CSSソース

セレクタ{
	border-style:double;
}
 

結果

border-style属性で宣言できる値

値の使用例

※１：ＩＥに対応していないバージョンがあり、ＮＮは対応していません。

枠に線を引くことによりメリハリを付けることができるので非常に便利です。