border-inline 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 CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

Try it

border-inline: solid;
writing-mode: horizontal-tb;

border-inline: dashed red;
writing-mode: vertical-rl;

border-inline: 1rem solid;
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: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

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

Values

The border-inline is specified with one or more of the following, in any order:

<'border-width'>

The width of the border. See border-width.

<'border-style'>

The line style of the border. See border-style.

<color>

The color of the border.

The physical borders to which border-inline maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

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

Formal definition

Initial valueApplies toInherited Computed value Animation type

as each of the properties of the shorthand:

border-inline-width: as each of the properties of the shorthand:
- border-inline-start-width: medium
- border-inline-end-width: medium
border-inline-style: as each of the properties of the shorthand:
- border-inline-start-style: none
- border-inline-end-style: none
border-inline-color: as each of the properties of the shorthand:
- border-inline-start-color: currentcolor
- border-inline-end-color: currentcolor

all elements

as each of the properties of the shorthand:

border-inline-width: 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
border-inline-style: as each of the properties of the shorthand:
- border-inline-start-style: as specified
- border-inline-end-style: as specified
border-inline-color: as each of the properties of the shorthand:
- border-inline-start-color: computed color
- border-inline-end-color: computed color

as each of the properties of the shorthand:

border-inline-width: as each of the properties of the shorthand:
- border-inline-start-width: by computed value type
- border-inline-end-width: by computed value type
border-inline-style: discrete
border-inline-color: as each of the properties of the shorthand:
- border-inline-start-color: by computed value type
- border-inline-end-color: by computed value type

Formal syntax

border-inline =
<'border-block-start'>

<border-block-start> =
<line-width> ||
<line-style> ||
<color>

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

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
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

Border with vertical text

HTML

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

CSS

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

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}