無料ホームページ作成!CSS・スタイルシート
枠線のスタイル

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

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

border-style属性

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

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

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

border-style属性の使い方

CSSソース

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

2本線です。

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

概要
none 表示しない(初期値)
solid 1本の線で表示
double 2本の線で表示
groove 枠がへこんでるように表示
ridge 枠が飛び出しているように表示
inset へこんでいるように表示
outset 飛び出しているように表示
dashed※1 破線で表示
dotted※1 点線で表示

値の使用例

※1:IEに対応していないバージョンがあり、NNは対応していません。

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

無料ホームページ作成!メニュー

CSS・スタイルシート

基本

文字

余白

背景

ボックス

配置

リスト

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS