border-right-styleプロパティ

TOPページに戻る > CSS

スポンサード リンク

border-right-styleプロパティ

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

使い方(書式)

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

border-right-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では未対応

実際の指定方法

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

html部分

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

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

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

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

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

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

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

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

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

実際の表示

border-right-style: solid;

border-right-style: dotted;

border-right-style: dashed;

border-right-style: double;

border-right-style: groove;

border-right-style: ridge;

border-right-style: inset;

border-right-style: outset;

border-right-style: none;





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