CSS border-block-start-style Property

What You’ll Learn

The border-block-start-style property defines the line style of the block-start border on an element. In horizontal writing, that usually means the top border style.

Definition and Usage

The border-block-start-style CSS property is part of the Logical Properties and Values specification. It sets the style of the border on the block-start side of an element. In left-to-right writing modes like English, block-start usually corresponds to the top edge.

This property is especially useful when designing layouts that need to adapt to different writing directions. It lets you control border appearance based on logical content flow instead of fixed physical sides.

📝 Syntax

The syntax for border-block-start-style is straightforward:

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

Basic Example

.solid-border {
  border-block-start-style: solid;
  border-block-start-width: 4px;
  border-block-start-color: blue;
}

The style value refers to the border line type, such as solid, dashed, or dotted.

Syntax Rules

• The initial value is none, which hides the block-start border.
• Common values include solid, dashed, and dotted.
• 3D-style keywords include groove, ridge, inset, and outset.
• Pair with width and color longhands, or use the border-block-start shorthand.
• Related longhands: border-block-start-width and border-block-start-color.

Default Value

The default value of border-block-start-style is none, meaning no block-start border is displayed until you choose a visible style.

💎 Property Values

The border-block-start-style property accepts standard CSS border style keywords.

Block-Start Style and Writing Modes

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

border-block-start-style vs border-top-style

Examples Gallery

Try border-block-start-style with solid, dashed, dotted styles, and vertical writing mode.

<style>
  p {
    border-block-start-style: solid;
    border-block-start-width: 3px;
    border-block-start-color: #3498db;
    padding-block-start: 0.75rem;
  }
</style>

<p>
  This paragraph has a solid border on the block-start side.
</p>

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

.dashed {
  border-block-start: 2px dashed #2563eb;
}
.dotted {
  border-block-start-style: dotted;
  border-block-start-width: 2px;
  border-block-start-color: #dc2626;
}

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

💡 Best Practices