border-inline-end 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 January 2020.

The border-inline-end CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.

Try it

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

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

border-inline-end: 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-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

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

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

Related properties are border-block-start, border-block-end, and border-inline-start, which define the other borders of the element.

Values

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

Formal definition

Initial valueApplies toInherited Computed value Animation type

as each of the properties of the shorthand:

all elements

as each of the properties of the shorthand:

border-inline-end-width: absolute length; 0 if the border style is none or hidden
border-inline-end-style: as specified
border-inline-end-color: computed color

as each of the properties of the shorthand:

border-inline-end-width: by computed value type
border-inline-end-style: discrete
border-inline-end-color: by computed value type

Formal syntax

border-inline-end =
<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

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-end: 5px dashed blue;
}