CSS - border-inline

The CSS property border-inline is a shorthand property that sets the values for different logical inline border attributes, combining them into a single statement.

The writing mode, directionality, and text orientation of the element determine how the border-inline attribute is mapped to actual boundaries.
Depending on values of writing-mode, direction, and text-orientation, border-inline behaves as either border-top and border-bottom or border-right and border-left properties.
Use the border-block property, which sets both border-block-start and border-block-end, to establish borders in other dimension.

Possible values

The border-inline 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 = <'border-block-start'>

Applies to

All the HTML elements.

CSS border-inline - Basic Example

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

<html>
<head>
<style>
   .container {
      background-color: #ffeeba;
      width: 450px;
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px; 
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
   }
   .custom-border {
      border-inline: 6px dashed #3498db;
      padding: 10px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A Example with border-inline property</p>
</div>
</body>
</html>

CSS border-inline - Writing Mode

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

   
<html>
<head>
<style>
   .container {
      background-color: #fed8b1;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
      writing-mode: vertical-rl;
   }
   .demo-border {
      border:4px solid black;
      border-inline: 0.9rem groove #e74c3c;
      padding: 10px;
      font-weight: bold;
      color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A border-inline example with vertical text.</p>
</div>
</body>
</html>

Related Properties

The table given below lists some related properties:

Property	Description
border-inline-width	Defines the width of the logical inline borders of an element.
border-inline-start-width	Defines the width of the logical inline-start border of an element.
border-inline-end-width	Defines the width of the logical inline-end border of an element.
border-inline-end	A shorthand property for setting the individual logical inline-end border property
border-inline-color	Defines the color of the logical inline borders of an element.
border-inline-start-color	Defines the color of the logical inline start border of an element.
border-inline-end-color	Defines the color of the logical inline-end border of an element.
border-inline-start	A shorthand property for setting the individual logical inline-start border property.
border-inline-style	Defines the style of the inline border of an element.
border-inline-start-style	Defines the style of the logical inline start border of an element.
border-inline-end-style	Defines the style of the logical inline end border of an element.

Print Page