CSS border-block-style Property

What You’ll Learn

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

Definition and Usage

The border-block-style CSS property is a shorthand that lets you define the style of the block-start and block-end borders of an element. In horizontal writing, block usually refers to the top and bottom borders.

This property is useful for setting border styles along the block axis. You can use one value for both sides or two values when block-start and block-end need different line styles.

📝 Syntax

The syntax for border-block-style accepts one or two border style values:

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

Basic Example

div {
  border-block-style: solid dashed;
  border-block-width: 4px;
  border-block-color: #0073e6;
}

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

Syntax Rules

• One value applies the same style to block-start and block-end.
• Two values set block-start first, then block-end.
• The initial value is none, which hides the block borders.
• Common values include solid, dashed, and dotted.
• Pair with border-block-width and border-block-color, or use the border-block shorthand.
• Related longhands: border-block-start-style and border-block-end-style.

Default Value

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

💎 Property Values

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

Block Style and Writing Modes

Block-start and block-end follow the block axis, so the same style rule adapts when writing mode changes.

border-block-style vs border-top-style / border-bottom-style

Examples Gallery

Try border-block-style with one value, two values, style keywords, and vertical writing mode.

<style>
  div {
    border-block-style: solid dashed;
    border-block-width: 4px;
    border-block-color: #0073e6;
    padding-block: 0.75rem;
  }
</style>

<div>
  This div has a solid block-start border and a dashed block-end border.
</div>

.card {
  border-block-style: solid;
  border-block-width: 2px;
  border-block-color: #64748b;
  padding-block: 1rem;
}

.panel {
  border-block-style: dashed dotted;
  border-block-width: 2px;
  border-block-color: #2563eb;
  padding-block: 0.75rem;
}

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

💡 Best Practices