CSS border-inline-width 属性

定义和用法

border-inline-width 属性设置元素在行内方向上的边框宽度。

注意：要使 border-inline-width 属性生效，必须设置 border-inline-style。

border-inline-width 属性的值可以通过不同方式设置：

如果 border-inline-width 属性有两个值：

border-inline-width: 10px 50px;

• 行内开始处的边框宽度为 10px
• 行内结束处的边框宽度为 50px

如果 border-inline-width 属性有一个值：

border-inline-width: 10px;

• 行内开始和结束处的边框宽度均为 10px

CSS border-inline-width 属性与 CSS 属性 border-bottom-width、border-left-width、border-right-width そして border-top-width 非常に似ているですが、 border-inline-width 属性は行内方向に依存しています。

注意：関連するCSS属性 writing-mode、text-orientation そして direction 行内方向を定義します。これは行の開始位置と終了位置、および border-inline-width 属性の結果。英語ページでは、行内方向は左から右、ブロック方向は下から上です。

例

例1

行内方向のボーダーに幅を設定します：

#example1 {
  border-inline-style: solid;
  border-inline-width: 10px;
}
#example2 {
  border-inline-style: dashed;
  border-inline-width: thin thick;
}

自分で試してみてください

例2：writing-mode属性の組み合わせ

行内方向の開始と終了位置は、 writing-mode 属性の影響：

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-width: 5px;
}

自分で試してみてください

例3：direction属性の組み合わせ

行内方向の開始と終了位置は、 direction 属性の影響：

div {
  direction: rtl;
  border-inline-width: 5px 15px;
}

自分で試してみてください

CSS文法

border-inline-width: medium|thin|thick|length|initial|inherit;

属性値

技術的な詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 枠線

参照：CSS ボーダー属性

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

参照：CSS border-inline-style 属性

参照：CSS ボーダーボトム幅属性

参照：CSS border-left-width 属性

参照：CSS border-right-width 属性

参照：CSS border-top-width 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性