border-inline-width CSS property

Baseline Widely available

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

The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.

The border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width.

Try it

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

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

border-inline-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: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

css
/* <'border-width'> values */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

/* Global values */
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;

Values

<'border-width'>

The width of the border. See border-width.

Formal definition

Initial valueApplies toInherited Computed value Animation type

as each of the properties of the shorthand:

border-inline-start-width: medium
border-inline-end-width: medium

all elements

as each of the properties of the shorthand:

border-inline-start-width: absolute length; 0 if the border style is none or hidden
border-inline-end-width: absolute length; 0 if the border style is none or hidden

as each of the properties of the shorthand:

border-inline-start-width: by computed value type
border-inline-end-width: by computed value type

Formal syntax

border-inline-width =
<'border-top-width'>{1,2}

<border-top-width> =
<line-width>

<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
This syntax reflects the latest standard as per CSS Borders and Box Decorations Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

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-width: 5px 10px;
}