CSS border-block-end

The border-block-end property in CSS is a shorthand property for setting the width, style, and color of an element’s block-end border. The block-end side depends on the element’s writing mode, directionality, and text orientation. This property simplifies managing the appearance of the block-end border in layouts.

Syntax of border-block-end

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

Values

ValueDescription
border-block-end-widthSpecifies the width of the block-end border. Accepts values like thin, medium, thick, or any valid CSS length (e.g., 2px).
border-block-end-styleDefines the style of the block-end border. Accepts values like solid, dashed, dotted, none, etc.
border-block-end-colorSpecifies the color of the block-end border. 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-end

Using the CSS border-block-end Property

The following examples demonstrate how to use the border-block-end property to set the appearance of the block-end border.

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

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

/* Set the block-end border to transparent */
.element {
  border-block-end: thin solid transparent;
}

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

Example for a Dashed Block-End Border

Below is an example demonstrating how to use border-block-end: 4px dashed #4CAF50; to apply a dashed green border to the block-end side:

index.html

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

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

</body>
</html>

Example for a 10px Solid Red Block-End Border

border-block-end: 10px solid red;

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

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

</body>
</html>

Browser Support

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

BrowserVersion
Chrome69.0
Edge79.0
Firefox41.0
Safari12.1
Opera56.0