CSS border-inline-start-width 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-width CSS property is used to control the width of the border on the inline start side of an element, which is typically the left side in left-to-right languages like English. This property allows web developers to specify the thickness of the border, and it can take values like pixels, percentages, or other valid length units. It is particularly useful for creating detailed and customized border styles around elements, providing precise control over the border width on specific sides, contributing to the overall layout and aesthetics of a webpage.

Initial value: medium
Applies to: all elements
Inherited: no
Computed value: absolute length; 0 if the border style is none or hidden
Animatable: by computed value type
JavaScript syntax: object.style.borderInlineStartWidth

Interactive Demo

border-inline-start-width: 5px;
writing-mode: horizontal-tb;

border-inline-start-width: 1rem;
writing-mode: vertical-rl;

border-inline-start-width: thin;
writing-mode: horizontal-tb;

border-inline-start-width: thick;
writing-mode: vertical-lr;

Example of the Border
Inline Start Width Property

Syntax

border-inline-start-width: <border-width>

Values

<border-width>Specifies the width 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: dashed red;
  border-inline-start-width: 10px
}

Result

Editor