CSS border-block-style Property

CSS border-block-style

The border-block-style property in CSS specifies the style of an element’s block-start and block-end borders. The block-start and block-end sides depend on the writing mode, directionality, and text orientation of the element. This property provides a shorthand for controlling the style of the block borders.

Syntax of border-block-style

</>

Copy

border-block-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Values

Value	Description
`none`	No border is displayed.
`hidden`	Similar to `none`, but the border conflicts are resolved for table elements.
`dotted`	A dotted border is displayed.
`dashed`	A dashed border is displayed.
`solid`	A solid border is displayed.
`double`	Two solid lines are displayed as the border.
`groove`	A border that appears carved into the page (opposite of `ridge`).
`ridge`	A border that appears raised from the page (opposite of `groove`).
`inset`	A border that makes the element appear embedded.
`outset`	A border that makes the element appear coming out of the page.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from its parent element.

Default Value

none

Examples for border-block-style

Using the CSS border-block-style Property

The following examples demonstrate how to use the border-block-style property to set the styles for the block-start and block-end borders.

</>

Copy

/* Set the block-start and block-end borders to solid */
.element {
  border-block-style: solid;
}

/* Set the block-start and block-end borders to dotted */
.element {
  border-block-style: dotted;
}

/* Set the block-start border to dashed and the block-end border to solid */
.element {
  border-block-style: dashed solid;
}

/* Inherit the block-start and block-end border styles from the parent */
.element {
  border-block-style: inherit;
}

Example for Dashed Block Borders

Below is an example demonstrating how to use border-block-style: dashed to apply dashed borders to the block-start and block-end sides:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    padding: 10px;
    border-block-width: 5px;
    border-block-style: dashed;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for Dotted Block Borders

border-block-style: dotted;

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    padding: 10px;
    border-block-width: 5px;
    border-block-style: dotted;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Example for Solid Block Borders

border-block-style: solid;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    padding: 10px;
    border-block-width: 5px;
    border-block-style: solid;
  }
</style>
</head>
<body>

<h2 class="box">Lorem Ipsum</h2>

</body>
</html>

Browser Support

The border-block-style property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	87.0
Edge	87.0
Firefox	66.0
Safari	14.1
Opera	73.0

TutorialKart

CSS border-block-style Property