CSS border-block-start Property

What You’ll Learn

The border-block-start property is a logical CSS shorthand for styling the border on the block-start side of an element. In horizontal writing, that usually means the top edge.

Definition and Usage

The border-block-start CSS property sets the style, width, and color of the border on the start side of an element’s block axis. In languages such as English, where text flows from left to right and top to bottom, the block-start edge corresponds to the top edge.

This property is particularly useful when designing for different writing modes, ensuring that the border adapts to the flow of content in various languages and layout directions.

📝 Syntax

The border-block-start property can be set using one or more of the following values. Each value is optional, but at least one must be provided for a visible border:

selector {
  border-block-start: <border-width> <border-style> <border-color>;
}

Basic Example

p {
  border-block-start: 5px solid blue;
}

You can also set the parts individually with longhand properties:

Syntax Rules

• Values follow the usual border order: width, then style, then color.
• A visible style such as solid is required for the border to show.
• Only the block-start edge is affected; other sides keep their existing borders.
• Pair with border-block-end when you need both logical block edges styled.
• Use padding-block-start to add space between content and the border.

Default Value

The default value of the border-block-start property comes from its longhand parts:

border-block-start: medium none currentColor;

• border-block-start-width — medium (the default width of the border)
• border-block-start-style — none (no border style is applied)
• border-block-start-color — currentColor (uses the current text color for the border color)

Because the default style is none, no border is visible until you set a visible style such as solid.

💎 Property Values

The border-block-start shorthand accepts the same value types as other border shorthands.

Block-Start and Writing Modes

The block-start edge follows the block axis, so the same rule adapts when writing mode changes.

border-block-start vs border-top

Examples Gallery

Try border-block-start on paragraphs, card accents, dashed headers, and vertical writing mode.

<style>
  p {
    border-block-start: 5px solid blue;
    padding-block-start: 0.75rem;
  }
</style>

<p>
  This paragraph has a solid blue border on the block-start side. In English, this is the top edge.
</p>

.card {
  border-block-start: 4px solid #059669;
  padding: 1rem;
  background: #ecfdf5;
  border-radius: 0.5rem;
}

.section-header {
  border-block-start-width: 2px;
  border-block-start-style: dashed;
  border-block-start-color: #64748b;
  padding-block-start: 0.75rem;
}

.vertical-panel {
  writing-mode: vertical-rl;
  border-block-start: 3px solid #7c3aed;
  padding: 1rem;
}

💡 Best Practices