CSS border-inline-start-width 属性

定义和用法

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

注意:要使 border-inline-start-width 属性生效,必须设置 border-inline-start-style 属性と関連しています。

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

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

インスタンス

例 1

行内方向の開始处的境界幅を設定:

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

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

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

行内方向の開始处的境界位置は、 writing-mode 属性の影響:

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

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

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

行内方向の開始と終了处的境界位置は、 direction 属性の影響:

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

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

CSS 言語

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

属性値

説明
medium 中程度の境界を指定します。デフォルト値。
thin 細い境界を指定します。
thick 粗い境界を指定します。
length あなたが境界の厚みを定義できるように許可します。参照:CSS 単位
initial この属性をデフォルト値に設定します。参照: initial
inherit 親要素からこの属性を継承します。参照: inherit

技術的詳細

デフォルト値: medium
継承性: いいえ
アニメーション作成: サポート。参照:アニメーション関連属性
バージョン: CSS3
JavaScript 言語: object.style.borderInlineStartWidth="10px"

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル:CSS 枠線

参照:CSS ボーダー属性

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

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

参照:CSS border-inline-start-style 属性

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

参照:CSS border-left-width 属性

参照:CSS border-right-width 属性

参照:CSS border-top-width 属性

参照:CSS direction 属性

参照:CSS text-orientation 属性

参照:CSS writing-mode 属性