Tutorial Manthra

In modern web development, we often use Logical Properties. Instead of thinking in terms of physical directions (Top, Bottom, Left, Right), logical properties focus on the flow of the content.

The border-block property refers to the borders at the start and end of the block dimension (the direction in which text blocks are stacked). For standard horizontal text (like English or Malayalam), the block dimension is Top and Bottom.

What is Border-Block?

The border-block property is a shorthand for setting both the border-block-start and border-block-end at the same time.

• Physical equivalent: border-top and border-bottom.
• Advantage: If you change the writing mode of your website (e.g., to a vertical language), these borders will automatically adjust to the new “top” and “bottom” of the text block.

Individual Block Properties

ou can control the start and end of the block dimension individually:

• border-block-start: Styles the top border (in horizontal writing).
• border-block-end: Styles the bottom border (in horizontal writing).

Example Code

.section-divider {
  /* Only styles the top and bottom */
  border-block-start: 5px solid #3498db;
  border-block-end: 2px dashed #FF0000;
}

Output

Border Block

Border-Block Shorthand

Just like the standard border property, you can set the width, style, and color in one line for both block edges.

Syntax: border-block: [width] [style] [color];

Example Code:

.bo-card {
  /* Sets both top and bottom borders to the same style */
  border-block: 4px solid #04AA6D;
}

Output

Border Block Shorthand

Summary Table: Border-Block Properties