CSS - border-inline-start Property

The CSS property border-inline-start is a shorthand that allows for the centralized setting of various individual logical inline-start border properties within a style sheet.

The writing mode, directionality, and text orientation of the element determine how the border-inline-start attribute maps to a physical border.
With respect to the values specified for writing-mode, direction, and text-orientation, it corresponds to the border-top, border-right, border-bottom, or border-left property.
The different borders of an element are determined by the properties border-block-start, border-block-end, and border-inline-end that are linked to border-inline-start.

Possible Values

The border-inline-start is specified with one or more of the following, in any order:

<'border-width'> - The width of the border.
<'border-style'> - The line style of the border.
<color> - The color of the border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-inline-start = <line-width> || <line-style> || <color>

Applies to

All the HTML elements.

CSS border-inline-start - Basic Example

The following example demonstrates the usage of border-inline-start CSS property.

    
<html>
<head>
<style>
   .container {
      background-color: lightblue;
      width: 250px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .customText {
      border-inline-start: 8px double #e74c3c;
      padding: 10px;
      margin-left: 10px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 16px;
      color: #2c3e50;
   }
</style>
</head>
<body>
<div class="container">
<p class="customText">An example with css property border-inline-start.</p>
</div>
</body>
</html>

CSS border-inline-start - Writing Mode.

The following example demonstrates the usage of border-inline-start CSS property with veritcal writing mode.

<html>
<head>
<style>
   .custom-container {
      background-color: #d6d4d4;
      width: 250px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .demo-border {
      writing-mode: vertical-rl;
      border: 2px solid #5e5a5a;
      border-inline-start: 1rem solid #3498db;
      padding: 12px;
      margin: 15px 15px;
      text-align: center;
      font-family: 'Verdana', sans-serif;
      font-size: 20px;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="demo-border">An example with CSS property border-inline-start and veritcal writing-mode</p>
</div>
</body>
</html>