border-inline-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.

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.

Try it

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.

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 valuemedium
Applies toall elements
Inheritedno
Percentageslogical-width of containing block
Computed valueabsolute length; 0 if the border style is none or hidden
Animation typeby computed value type

Formal syntax

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

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

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

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;
}

Specifications

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

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-inline-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also