CSS border-inline-style Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-inline-style CSS property is used to define the style of an element's inline borders, which are the borders that run horizontally within a block of text. This property allows you to specify the line style, such as solid, dotted, or dashed, for these inline borders. It is particularly useful when working with complex layouts where text flows around elements with borders. By using border-inline-style, you can control the visual appearance of these inline borders, enhancing the overall design and readability of your web content.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.borderInlineStyle

Interactive Demo

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

border-inline-style: dotted;
writing-mode: vertical-rl;

border-inline-style: dashed;
writing-mode: horizontal-tb;

border-inline-style: double;
writing-mode: vertical-lr;

Example of the Border
Inline Style Property

Syntax

border-inline-style: <border-style>

Values

<border-style>Specifies the style of the border

Example

HTML

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

CSS

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

Result

Editor