border-inline-start-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

border-inline-start-width は CSS のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは border-top-width、border-right-width、border-bottom-width、border-left-width の何れかに対応し、どれに対応するかは writing-mode、direction、text-orientation で定義された値によって決まります。

試してみましょう

border-inline-start-width: thick;
writing-mode: horizontal-tb;

border-inline-start-width: thick;
writing-mode: vertical-rl;

border-inline-start-width: 4px;
writing-mode: horizontal-tb;
direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: #000;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

構文

css

/* <'border-width'> 値 */
border-inline-start-width: 5px;
border-inline-start-width: thick;

/* グローバル値 */
border-inline-start-width: inherit;
border-inline-start-width: initial;
border-inline-start-width: revert;
border-inline-start-width: unset;

関連するプロパティとしては、 border-block-start-width、border-block-end-width、border-inline-end-width が要素の他の境界の幅を定義します。

値

<'border-width'>: 境界の幅です。 border-width を参照してください。

公式定義

初期値	`medium`
適用対象	すべての要素
継承	なし
パーセント値	包含ブロックの論理的な幅
計算値	絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0`
アニメーションの種類	計算値の型による

形式文法

border-inline-start-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

例

HTML

html

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-start-width: 5px;
}

仕様書

Specification
CSS Logical Properties and Values Level 1 # border-width