CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

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:
﻿border-inline-color﻿
﻿border-inline-style﻿
﻿border-inline-width﻿
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.
﻿
﻿
﻿
﻿
﻿
﻿

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.

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

border-inline

Possible values

Constituent properties

Syntax

Applies to

CSS border-inline - Basic Example

CSS border-inline - Writing Mode

Related Properties