CSS border-block-width Property

CSS border-block-width

The border-block-width property in CSS specifies the width 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 allows for flexible control of the block border widths in layouts.

Syntax of border-block-width

</>

Copy

border-block-width: medium | thin | thick | length | initial | inherit;

Values

Value	Description
`medium`	Specifies a medium border width. This is the default value.
`thin`	Specifies a thin border width.
`thick`	Specifies a thick border width.
`length`	Specifies the width of the block borders in a specific length unit (e.g., `2px`, `1em`).
`initial`	Sets the property to its default value (`medium`).
`inherit`	Inherits the value from its parent element.

Default Value

medium

Examples for border-block-width

Using the CSS border-block-width Property

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

</>

Copy

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

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

/* Set different widths for block-start and block-end borders */
.element {
  border-block-width: 4px 2px;
}

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

Example for Thick Block Borders

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

index.html

</>

Copy

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

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

</body>
</html>

Example for Block Border Width with 10px

border-block-width: 10px;

</>

Copy

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

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

</body>
</html>

Example for Block Border Width with Different Widths for block-start and block-end Borders

border-block-width: 5px 10px;

</>

Copy

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

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

</body>
</html>

Browser Support

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