CSS border-block-end-style Property

CSS border-block-end-style

The border-block-end-style property in CSS specifies the line style of the block-end border of an element. The block-end side depends on the writing mode, directionality, and text orientation. This property allows you to define various border styles like solid, dotted, dashed, and more.

Syntax of border-block-end-style

</>

Copy

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

Values

Value	Description
`none`	No border is drawn.
`hidden`	Same as `none`, but ensures no border conflict in table elements.
`dotted`	A dotted border.
`dashed`	A dashed border.
`solid`	A single solid line border.
`double`	Two lines make up the border. The space between the lines is defined by the border width.
`groove`	A carved border effect.
`ridge`	A raised border effect.
`inset`	An embedded border effect.
`outset`	A border that looks like it is coming out of the page.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the value from the parent element.

Default Value

none

Examples for border-block-end-style

Using the CSS border-block-end-style Property

The following examples demonstrate how to use the border-block-end-style property with different values.

</>

Copy

/* Apply a solid border style to the block-end */
.element {
  border-block-end-style: solid;
}

/* Apply a dashed border style to the block-end */
.element {
  border-block-end-style: dashed;
}

/* Apply no border to the block-end */
.element {
  border-block-end-style: none;
}

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

Example for a Dashed Block-End Border

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

index.html

</>

Copy

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

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

</body>
</html>

Example for a Dotted Block-End Border

border-block-end-style: dotted;

</>

Copy

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

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

</body>
</html>

Example for a Solid Block-End Border

border-block-end-style: solid;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    border-block-end: 4px;
    border-block-end-style: solid;
    border-block-end-color: red;
  }
</style>
</head>
<body>

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

</body>
</html>

Browser Support

The border-block-end-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-end-style Property