CSS border-inline-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!

Description

The border-inline-width CSS property is used to specify the width of the inline borders of an element, which are the borders that run along the inline axis of text or inline-level elements. It allows web developers to control the thickness of these borders, which can be useful for styling elements like inline links or inline text highlights. This property complements the more common border-width property, which controls the width of borders along the block axis. By adjusting border-inline-width, designers can achieve finer control over the visual presentation of inline content on 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.borderInlineWidth

Interactive Demo

Example of the Border
Inline Width Property

Syntax

border-inline-width: <border-width>

Values

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

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 1st January 2024