CSS border-inline-style 属性

選択科目

border-inline-style コース推薦：

border-inline-style 定義と使用法

行内の開始位置の境界線スタイルが実線（solid）の場合、 border-inline-style 属性は要素の行内方向上の境界線スタイルを設定します。

div {
  • 属性の値は以下の方法で設定できます：
  • 属性には2つの値があります：

行内の開始位置の境界線スタイルが実線（solid）の場合、 border-inline-style 行内の終了位置の境界線スタイルが点線（dotted）の場合、

writing-mode
  • 属性には1つの値があります：

行内の開始と終了位置の境界線スタイルが点線（dotted）です。 border-inline-style 属性は CSSの border-bottom-style、border-left-style、border-right-style そして border-top-style 属性は非常に似ていますが、 border-inline-style 属性は行内方向に依存しています。

注意：関連する CSS 属性 border-inline-style: dashed dotted;、text-orientation そして 例3：direction属性と組み合わせた場合 行内方向を定義します。これは行の開始と終了位置、および border-inline-style 属性の結果です。英語のページでは、行内方向は左から右、ブロック方向は下から上です。

实例

例子 1

インスタンス

例1
  行内方向のエッジスタイルを設定する：
direction: rtl;
#example1 {
  border-inline-style: solid;
direction: rtl;

border-inline-style: solid dotted;

#example2 {

border-inline-style: dotted; border-inline-style: dashed dotted; 行内方向の始まりと終わりのエッジ位置は、

direction
  例2：writing-mode属性と組み合わせた場合
  writing-mode
direction: rtl;

border-inline-style: solid dotted;

writing-mode: vertical-rl;

border-inline-style: dotted; 例3：direction属性と組み合わせた場合 行内方向の始まりと終わりのエッジ位置は、

direction
  属性の影響：
  div {
direction: rtl;

border-inline-style: solid dotted;

}

実際に試してみる

CSS文法

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; 属性値
none 値
説明 デフォルト値。エッジを指定しません。
hidden noneと同じですが、テーブル要素のエッジ干渉解決における違いがあります。
dashed 破線エッジを指定します。
solid 索線エッジを指定します。
double ダブルラインエッジを指定します。
groove

3Dゴレージュエッジを指定します。

効果はborder-colorの値によって決まります。
ridge

3Dリッジエッジを指定します。

効果はborder-colorの値によって決まります。
inset

3Dインセットエッジを指定します。

効果はborder-colorの値によって決まります。
outset

3Dアウトセットエッジを指定します。

効果はborder-colorの値によって決まります。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

デフォルト値： none
継承性： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.borderInlineStyle="dotted"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

関連ページ

チュートリアル：CSS 边框

参考：CSS ボーダー属性

参考：CSS ボーダインライン属性

参考：CSS border-inline-style 属性

参考：CSS ボーダーボトムスタイル属性

参考：CSS border-left-style 属性

参考：CSS border-right-style 属性

参考：CSS border-top-style 属性

参考：CSS direction 属性

参考：CSS text-orientation 属性

参考：CSS writing-mode 属性