CSS border-inline

The border-inline property in CSS is a shorthand property that sets the width, style, and color of an element’s inline-start and inline-end borders.

The inline direction is determined by the writing mode, text direction, and text orientation of the element. This property allows for controlling both inline borders in a single declaration.

Syntax of border-inline

</>
Copy
border-inline: border-inline-width border-inline-style border-inline-color | initial | inherit;
  • border-inline-width
  • border-inline-style (required)
  • border-inline-color

Values

ValueDescription
border-inline-widthSpecifies the width of the inline-start and inline-end borders. Accepts values like thin, medium, thick, or any valid CSS length (e.g., 2px).
border-inline-styleDefines the style of the inline-start and inline-end borders. Accepts values like solid, dashed, dotted, none, etc.
border-inline-colorSpecifies the color of the inline-start and inline-end borders. Accepts any valid CSS color value (e.g., red, #ff0000, rgba(255,0,0,0.5)).
initialSets the property to its default value (medium none currentColor).
inheritInherits the value from its parent element.

Default Value

medium none currentColor

Examples for border-inline

Using the CSS border-inline Property

The following examples demonstrate how to use the border-inline property to set the appearance of the inline-start and inline-end borders.

</>
Copy
/* Set the width, style, and color of the inline-start and inline-end borders */
.element {
  border-inline: 5px solid blue;
}

/* Set only the border style and color */
.element {
  border-inline: dashed red;
}

/* Use different colors for inline-start and inline-end borders */
.element {
  border-inline: 3px solid blue red;
}

/* Use the initial value */
.element {
  border-inline: initial;
}

/* Inherit the border-inline value from the parent */
.element {
  border-inline: inherit;
}

Example for a Solid Inline Border

Below is an example demonstrating how to use border-inline: 4px solid lightgreen; to apply a solid light green border to the inline-start and inline-end sides:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline: 4px solid red;
    background: lightgreen;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Example for a Dotted Blue Inline Border

border-inline: 4px dotted blue;

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline: 4px dotted blue;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Example for a Double Inline Border

border-inline: 4px dotted blue;

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline: double;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Browser Support

The border-inline property is supported in modern browsers. Below is a compatibility table:

BrowserVersion
Chrome87.0
Edge87.0
Firefox66.0
Safari14.1
Opera73.0