CSS border-block

The border-block property in CSS is a shorthand property that sets the border width, style, and color for an element’s block-start and block-end borders in a single declaration. The block-start and block-end sides depend on the element’s writing mode, directionality, and text orientation.

Syntax of border-block

</>
Copy
border-block: border-block-width border-block-style border-block-color | initial | inherit;

Values

ValueDescription
border-block-widthSpecifies the width of the block-start and block-end borders. Accepts values like thin, medium, thick, or any valid CSS length (e.g., 2px).
border-block-styleDefines the style of the block-start and block-end borders. Accepts values like solid, dashed, dotted, none, etc.
border-block-colorSpecifies the color of the block-start and block-end borders. Accepts any valid CSS color value (e.g., red, #ff0000, rgba(255,0,0,0.5)).
initialSets the property to its default value (border is medium none currentColor).
inheritInherits the value from its parent element.

Default Value

medium none currentColor

Examples for border-block

Using the CSS border-block Property

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

</>
Copy
/* Set border width, style, and color */
.element {
  border-block: 5px solid blue;
}

/* Set only the border style and color */
.element {
  border-block: solid red;
}

/* Use the initial value */
.element {
  border-block: initial;
}

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

Example for a Solid Border

Below is an example demonstrating how to use border-block: 4px solid red; to apply a solid red border to the block-start and block-end sides:

index.html

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

<h1>Block Borders</h1>
<div class="box"></div>

</body>
</html>

Example for a Dotted Border

border-block: 4px dotted red;

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

<h1>Block Borders</h1>
<div class="box"></div>

</body>
</html>

Example for a Double Border

border-block: double red;

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    border-block: double red;
    background-color: yellow;
  }
</style>
</head>
<body>

<h1>Block Borders</h1>
<div class="box"></div>

</body>
</html>

Browser Support

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

BrowserVersion
Chrome87.0
Edge87.0
Firefox66.0
Safari14.1
Opera73.0