border-styleプロパティ

TOPページに戻る > CSS

スポンサード リンク

border-styleプロパティ

HTML要素の上下左右の枠線のスタイル(枠線の種類)をまとめて指定できます
値は、solidなどキーワードでの指定です
閲覧するブラウザによって若干見た目が変わることがあります(四角い点線、丸い点線など)
border-styleプロパティの初期値はnoneです。初期値の場合、何も表示されません

使い方(書式)

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

border-styleプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
solid 実線を表示。一番良く使います
dotted 点線を表示
dashed 破線を表示
double 二重線で表示
groove 立体的な線
ridge 立体的な線
inset 立体的な線
outset 立体的な線
none 枠線を表示しない。これが初期値
hidden noneと同じく枠線を表示しない。古いバージョンのIEでは未対応

値の数 説明
値が1つ 「上下左右」の枠線のスタイルを一括で指定する
値が2つ 「上下」「左右」 1つ目が上下、2つ目が左右の枠線のスタイル
値が3つ 「上」「左右」「下」 1つ目が上、2つ目が左右、3つ目が下の枠線のスタイル
値が4つ 「上」「右」「下」「左」 1つ目が上、2つ目が右、3つ目が下、4つ目が左の枠線のスタイル


実際の指定方法

p.hoge {
border-style: solid;       /* 要素の枠線を実線で表示 */
 }
p.hoge2 {
 border-style: dotted;     /* 要素の枠線を点線で表示 */
 }
p.hoge3 {
 border-style: dashed;     /* 要素の枠線を破線で表示 */
 }
p.hoge4 {
 border-style: double;     /* 要素の枠線を二重線で表示 */
 }
p.hoge5 {
 border-style: groove;     /* 要素の枠線をgrooveで表示 */
 }
p.hoge6 {
 border-style: ridge;      /* 要素の枠線をridgeで表示 */
 }
p.hoge7 {
 border-style: inset;      /* 要素の枠線をinsetで表示 */
 }
p.hoge8 {
 border-style: outset;     /* 要素の枠線をoutsetで表示 */
 }
p.hoge9 {
 border-style: none;       /* 要素の枠線を表示しない */
 }

html部分

<p class="hoge">border-style: solid;</p>

<p class="hoge2">border-style: dotted;</p>

<p class="hoge3">border-style: dashed;</p>

<p class="hoge4">border-style: double;</p>

<p class="hoge5">border-style: groove;</p>

<p class="hoge6">border-style: ridge;</p>

<p class="hoge7">border-style: inset;</p>

<p class="hoge8">border-style: outset;</p>

<p class="hoge9">border-style: none;</p>

実際の表示

border-style: solid;

border-style: dotted;

border-style: dashed;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

border-style: none;


複数の値の指定方法

値を複数指定すると辺ごとに枠線の種類を指定できます

css

p.hoge10 {
 border-style: solid dotted;  /* 要素の上下の枠線がsolid、左右がdotted */
 }
p.hoge11 {
 border-style: solid dotted dashed; /* 要素の上の枠線がsolid、左右がdotted、下がdashed */
 }
p.hoge12 {
 border-style: solid dotted dashed double; /* 要素の上の枠線がsolid、右がdotted、
                                                    下がdashed 左がdouble */
 }

html部分

<p class="hoge10">border-style: solid dotted;</p>

<p class="hoge11">border-style: solid dotted dashed;</p>

<p class="hoge12">border-style: solid dotted dashed double;</p>

実際の表示

border-style: solid dotted;

border-style: solid dotted dashed;

border-style: solid dotted dashed double;




(C)2012 ホームページ作成無料