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

定義と使用方法

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

• border-inline-end-width（行内終了辺框幅）
• border-inline-end-style（行内終了辺框スタイル）
• border-inline-end-color（行内終了辺框色）

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

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

インスタンス

例 1

行内方向の末端の枠線に幅、色、スタイルを設定します：

div {
  border-inline-end: 10px solid pink;
}

実際に試してみる

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

行内方向の末端の枠線位置は、 writing-mode 属性の影響：

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

実際に試してみる

例 3：direction 属性と組み合わせた場合

行内方向の末端の枠線位置は、 direction 属性の影響：

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

実際に試してみる

CSS 文法

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

属性値

技術的詳細

技術的詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 边框

参照：CSS ボーダー属性

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

参照：CSS ボーダインラインエンドスタイル属性

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

参照：CSS ボーダーボトムカラー属性

参照：CSS border-left-color 属性

参照：CSS border-right-color 属性

参照：CSS border-top-color 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性