CSS ボーダーインライン属性

定義と用法

border-inline 属性は以下の属性のショートカットです：

• border-inline-width
• border-inline-style（必須）
• border-inline-color

色や幅の値が省略された場合、デフォルト値が使用されます。

CSSの border-inline 属性と border 属性が非常に似ているが border-inline 属性は行内方向に依存しています。

注意：関連する CSS プロパティ writing-mode、text-orientation および direction 行内方向を定義します。これは行の始めと終わりの位置、および border-inline 属性の効果。英語のページでは、行内方向は左から右、ブロック方向は下に向かいます。

インスタンス

例 1

行内方向上の異なる要素に枠線のスタイル、色、幅を設定します：

h1 {
  border-inline: 5px solid red;
}
h2 {
  border-inline: 4px dotted blue;
}
div {
  border-inline: double;
}

実際に試してみてください

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

行内方向上の始めと終わりの位置の枠線は、 writing-mode 属性の影響：

div {
  writing-mode: vertical-rl;
  border-inline: hotpink dashed 8px;
}

実際に試してみてください

CSS 文法

border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 枠線

参照：CSS ボーダー属性

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

参照：CSS border-inline-style 属性

参照：CSS border-inline-width 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性