English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS border-right-style属性の使用方法と例

border-right-style属性は、独自に要素の右端の枠線のスタイルを設定します。しかし、多くの場合、以下のようにborder-styleまたはborder-rightこのような省略形のCSS属性は使いやすく、推奨されます。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプト内での使用構文を示しています。

デフォルト値:none
適用:すべての要素
継承:ありません
アニメーション可能:いいえ。参照してください アニメーション属性
バージョン:CSS 1、2、3
JavaScript構文:object object.style.borderRightStyle="dashed"

border-right-styleの使用構文

この属性の構文は以下の通りです:

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

以下の例では、borderの使用方法を示します。-right-style属性。

  p {
   border-right-style: dashed;
   border-right-width: 3px;
  }
テストして‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

説明
none枠線は表示されません。
hidden同じnoneと異なり、テーブルセルには折りたたみ枠線そして2つのセルが共有しています。hidden値は、他のすべての枠線スタイルよりもhiddenが優先されるため、枠線を描画しないことを確実にします。
dotted枠線を点のシリーズに表示します。
dashed枠線を短い線のシリーズに表示します。
solid枠線を1本の太線に表示します。
double枠線を2本の平行な太線に表示し、それらの間に一定の間隔を置きます。2本の線の合計とその間の間隔は、border-widthの値。
groove表示して、キャンバスに彫り込まれたように見えます。それは3Dの印象、通常、枠線の色よりもborder-color明るくて暗い2色の影を作成して実現されています。
ridge効果の逆の枠線grooveを表示します。また、3Dの印象、枠線がキャンバスから出てくるように見えます。
inset表示して、要素の枠線がキャンバスに埋め込まれているように見えます。それは3D、これは通常、影の2色を作成して、枠線の色よりもborder-color少し明るくて濃いです。
outset効果の逆の枠線insetを表示します。また、3Dの印象、枠線がキャンバスから出てくるように見えます。
initialこの属性をデフォルト値に設定します。
inherit指定された場合、関連する要素は親要素のborderを取得します-right-styleの属性値。

ブラウザ互換性

border-right-style属性のブラウザの互換性について、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョン番号を示しています;すべての主要ブラウザがこの属性をサポートしています。

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 4+

警告: Internet Explorer 7およびそれ以前のバージョンではサポートされていません。IE8サポートしていますが、value hiddenが。IE9及びそれ以降のバージョンがhidden値をサポートしています。

さらに詳しく

以下のチュートリアルを参照してください:CSS BorderCSS3 Border

関連属性:borderborder-styleborder-rightborder-right-color
border-right-width