CSS border-inline-start-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-start-style CSS property defines the style of the border on the inline-start side of an element, which is the side that depends on the writing direction (e.g., left in left-to-right scripts like English, or right in right-to-left scripts like Arabic). It allows web developers to specify whether the border should be solid, dashed, dotted, or have any other supported border style. This property is particularly useful for creating visually appealing layouts in multilingual websites where text direction may change, ensuring that the border style adapts accordingly to maintain a consistent and aesthetically pleasing design.

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

Interactive Demo

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

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

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

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

Example of the Border
Inline Start Style Property

Syntax

border-inline-start-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-start: 4px red;
  border-inline-start-style: dotted
}

Result

Editor