CSS border-block-style Enhance Border Styles

Syntax

/* <'border-style'> values */
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;

/* Global values */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: revert-layer;
border-block-style: unset;

Values

• <'border-style'>:
  • none: No border.
  • hidden: Same as none, but used for border conflict resolution.
  • dotted: A series of dots.
  • dashed: A series of short dashes.
  • solid: A single, solid line.
  • double: Two solid lines.
  • groove: Appears to be carved into the page.
  • ridge: Opposite of groove.
  • inset: Appears to be embedded into the page.
  • outset: Opposite of inset.
• Global values: inherit, initial, revert, revert-layer, unset.

Formal Definition

Formal Syntax

border-block-style =
  <'border-top-style'> {1,2}

<'border-top-style'> =
  <line-style>

<line-style> =
  none       |
  hidden     |
  dotted     |
  dashed     |
  solid      |
  double     |
  groove     |
  ridge      |
  inset      |
  outset

Examples

Example 1: Dashed Border with Vertical Text

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-style: dashed;
}

Results

The text is oriented vertically, and the border style is dashed, adapting to the vertical orientation.

Example 2: Solid Border with Dotted Style

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  border: 5px dotted cyan;
  border-block-style: solid;
  background-color: purple;
}

Results

The border style is solid, overriding the initial dotted style.

Specifications

The border-block-style property is part of the CSS Logical Properties and Values Level 1 specification.

Browser Compatibility

The border-block-style property is widely supported across modern browsers:

• Chrome: Version 87 and above
• Edge: Version 87 and above
• Firefox: Version 66 and above
• Opera: Version 73 and above
• Safari: Version 14.1 and above

For the most up-to-date information, refer to the Browser Compatibility Data (BCD) tables.

See Also

• CSS Logical Properties and Values: Dive into logical properties in CSS and how they help create adaptive and responsive web designs.
• border-top-style: Understand how the border-top-style property works.
• border-right-style: Explore the border-right-style property.
• border-bottom-style: Learn about the border-bottom-style property.
• border-left-style: Discover the border-left-style property.
• writing-mode: See how the writing-mode property affects text direction and orientation.
• direction: Learn about the direction property for text direction.
• text-orientation: Understand how the text-orientation property controls text orientation.