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

定義と用法

border-inline-end-width 行内方向の末端に属性設定要素の枠線の幅。

注意：を設定する必要があります。 border-inline-end-width 属性が効果を発揮するには、 border-inline-end-style 属性と同じです。

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

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

インスタンス

例1

行内方向の終端の辺框幅を設定する：

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

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

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

行内方向の終端の辺框位置は、 writing-mode 属性の影響：

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

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

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

行内方向の始端と終端の辺框位置は、 direction 属性の影響：

div {
  direction: rtl;
  border-inline-end-width: 10px;
}

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

CSS文法

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

属性値

値 説明
medium 中間の辺框を指定します。デフォルト値。
thin 細い辺框を指定します。
thick 粗い辺框を指定します。
length 边框的厚度を定義することができます。参照してください：CSS 単位。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit 親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

デフォルト値： medium
継承性： いいえ
アニメーション作成： サポートされています。参照してください：アニメーションに関連する属性。
バージョン： CSS3
JavaScript文法： object.style.borderInlineEndWidth="10px"

ブラウザのサポート

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

クローム エッジ ファイアフォックス サファリ オペラ
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル：CSS 枠線

参照：CSS ボーダー属性

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

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

参照：CSS border-inline-start-width 属性

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

参照：CSS border-left-width 属性

参照：CSS border-right-width 属性

参照：CSS border-top-width 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性