Tutorial Manthra

Following the concept of logical properties, the border-inline property deals with the dimension inside a line of text.

What is Border-Inline?

The border-inline property sets the borders at the start and end of the inline dimension. In standard horizontal English or Malayalam text, this refers to the Left and Right sides.

• Physical equivalent: border-left and border-right.
• Logical significance: In a Right-to-Left (RTL) language like Arabic, the “start” would be the right side. Using border-inline ensures your design flips correctly for different languages.

Individual Inline Properties

• border-inline-start: The left border (in LTR horizontal text).
• border-inline-end: The right border (in LTR horizontal text).

Example Code:

.bo-in {
  /* Creates a vertical line on both start side (left) */
  border-inline-start: 10px solid #00F;
  padding-left: 20px;
  border-inline-start: 10px solid #00F;
  padding-right: 20px;
}

.bo-quote {
  /* Creates a vertical line only on the start side (left) */
  border-inline-start: 10px solid #F00;
  padding-left: 20px;
}

Output

Border-Inline Shorthand

You can define the width, style, and color for both the left and right (inline) sides in one line.

Example Code:

.sidebar-box {
  /* Sets both left and right borders */
  border-inline: 30px solid #333;
}

Output

Summary Table: Border-Inline Properties