CSS border-block-start-style Property

CSS border-block-start-style

The border-block-start-style property in CSS specifies the style of the block-start border of an element. The block-start side depends on the element’s writing mode, directionality, and text orientation. This property allows you to define the appearance of the block-start border using various border styles.

Syntax of border-block-start-style

</>

Copy

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

Values

Value	Description
`none`	No border is displayed.
`hidden`	The same as `none`, but is used when border conflict resolution is required.
`dotted`	Displays the border as a series of dots.
`dashed`	Displays the border as a series of dashes.
`solid`	Displays the border as a single solid line.
`double`	Displays the border as two solid lines.
`groove`	Displays the border as if it is carved into the page.
`ridge`	Displays the border as though it is coming out of the page.
`inset`	Displays the border as though it is embedded in the element.
`outset`	Displays the border as though it is coming out of the element.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from its parent element.

Default Value

none

Examples for border-block-start-style

Using the CSS border-block-start-style Property

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

</>

Copy

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

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

/* Set the block-start border style to double */
.element {
  border-block-start-style: double;
}

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

Example for a Dashed Block-Start Border

Below is an example demonstrating how to use border-block-start-style: dashed; to apply a dashed border to the block-start side:

index.html

</>

Copy

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

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

</body>
</html>

Example for a Dotted Block-Start Border

border-block-start-style: dotted;

</>

Copy

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

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

</body>
</html>

Example for a Double line Styled Block-Start Border

border-block-start-style: double;

</>

Copy

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

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

</body>
</html>

Browser Support

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

Browser	Version
Chrome	69.0
Edge	79.0
Firefox	41.0
Safari	12.1
Opera	56.0

TutorialKart

CSS border-block-start-style Property