CSS border-block-start-style Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS property border-block-start-style controls the line style used on the box edge that sits at the "start" of the block axis of an element. As a logical property it targets the block-start edge rather than a physical side; in typical horizontal writing modes that corresponds to the top edge, but the exact physical side is determined by the element’s writing direction and orientation (writing-mode and direction). Because it addresses the logical block-start edge, it is the appropriate choice when you want your borders to adapt automatically for different writing directions and international layouts.

This property is one part of the border styling system and can be set on its own or via shorthand properties. For example, it can be overridden or grouped with the logical shorthand border-block-style, and it is also superseded by broader declarations such as the physical shorthand border-style when those shorthands are applied with equal or greater specificity. It does not inherit from parent elements; its computed value is used when painting the element’s border box and is considered alongside the corresponding width and color for the final rendered border.

In practice, use border-block-start-style when you need to change only the start-edge appearance without affecting the opposite block edge or the inline edges, and when you want your styles to remain correct across left-to-right, right-to-left, and vertical writing modes. When working with table cells or elements where adjacent borders can interact, the chosen style participates in CSS’s border conflict resolution rules (for example when border-collapse is used on tables), so the visible outcome can depend on neighboring cells’ border properties as well as cascade and specificity. Changing this property is a repaint-level change: it affects rendering of the element’s edge and should be used deliberately in scenarios that require layout- and writing-mode-aware border control.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.borderBlockStartStyle

Interactive Demo

border-block-start-style: solid;
writing-mode: horizontal-tb;

border-block-start-style: dotted;
writing-mode: vertical-rl;

border-block-start-style: dashed;
writing-mode: horizontal-tb;

border-block-start-style: double;
writing-mode: vertical-lr;

Example of the Border
Block Start Style Property

Syntax

border-block-start-style: <border-style>

Values

<border-style>Specifies the style of the border

Example

HTML

<div class="container">

  <h2>border-block-start-style examples</h2>



  <div class="box solid">

    <div class="label">solid</div>

    This box uses border-block-start-style: solid;

  </div>



  <div class="box dashed">

    <div class="label">dashed</div>

    This box uses border-block-start-style: dashed;

  </div>



  <div class="box dotted">

    <div class="label">dotted</div>

    This box uses border-block-start-style: dotted;

  </div>



  <div class="box double">

    <div class="label">double</div>

    This box uses border-block-start-style: double;

  </div>



  <div class="box groove">

    <div class="label">groove</div>

    This box uses border-block-start-style: groove;

  </div>



  <div class="box inset">

    <div class="label">inset</div>

    This box uses border-block-start-style: inset;

  </div>

</div>

CSS

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f6f7f9;
  color: #222;
  padding: 28px;
}

.container {
  max-width: 680px;
  margin: 0 auto;
}

h2 {
  margin: 0 0 18px 0;
  font-size: 18px;
  font-weight: 600;
}

.box {
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-block-start-width: 6px;         /* logical property for the start edge */
  border-block-start-style: solid;       /* default style (overridden per example) */
  border-block-start-color: #333;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.box .label {
  font-weight: 700;
  margin-bottom: 6px;
  color: #111;
}

/* Individual examples: different border-block-start-style values and colors */
.box.solid {
  border-block-start-style: solid;
  border-block-start-color: #1b8a44;
}

.box.dashed {
  border-block-start-style: dashed;
  border-block-start-color: #d46a1f;
}

.box.dotted {
  border-block-start-style: dotted;
  border-block-start-color: #0b78d1;
}

.box.double {
  border-block-start-style: double;
  border-block-start-color: #6a2f8f;
}

.box.groove {
  border-block-start-style: groove;
  border-block-start-color: #2a9d8f;
}

.box.inset {
  border-block-start-style: inset;
  border-block-start-color: #c0392b;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-block-start-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.