CSS border-inline Property

Description

The border-inline CSS property is used to set the properties of an element's inline borders, which are the borders that run along the inline direction of text or other inline-level elements. It allows you to specify the border's width, style, and color, much like the regular border property. This property is particularly useful in scenarios where text or inline elements need custom border styling, such as when creating decorative elements within a paragraph or inline-blocks. It complements the standard border property, which controls borders along the block direction. The border-inline property is part of the CSS Logical Properties and Values module, which aims to provide more flexible and context-aware styling for multilingual and responsive web design.

Initial value

See individual properties

Applies to

all elements

Inherited

no

Computed value

See individual properties

Animatable

See individual properties

JavaScript syntax

object.style.borderInline

Interactive Demo

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

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

border-inline: 1rem solid purple;
writing-mode: horizontal-tb;
direction: rtl;

Syntax

border-inline: <border-width> | <border-style> | <color>

Values

• <border-width>Specifies the width of the border
• <border-style>Specifies the style of the border
• <color>Specifies the color of the border

Example

<div>This is a box with a border around it.</div>

div {
  background-color:#eee;
  color:#8b008b;
  padding:.75em;
  width:300px;
  height:100px;
  border-inline: 4px dashed red;
}

Browser Support

The following table will show you the current browser support for the CSS border-inline property.

Desktop
87	87	66	73	14.1

Tablets / Mobile
87	66	62	14.5	14	87

Last updated by CSSPortal on: 1st January 2024