CSS - border-block-end Property

The CSS shorthand property border-block-end provides an easy way to set the values of all logical block-end border properties in one place inside the style sheet.

Values forborder-block-end-width, border-block-end-style, and border-block-end-color can be specified using the shorthand border-block-end property.
The writing-mode, direction, and text-orientation of the element, which correspond to characteristics like border-top, border-right, border-bottom, or border-left determine its mapping to a particular physical border.
It is associated with properties that specify the remaining borders of the element, such border-block-start, border-inline-start, and border-inline-end.

Possible values

The border-block-end can be specified with one or more of the following:

<'border-width'> - The width of the border.
<'border-style'> - The line style of the border.
<color> - The color of the border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-block-end = <line-width> || <line-style> || <color>

Applies to

All the HTML elements.

CSS border-block-end - Basic Example

The following example demonstrates the usage of border-block-end property.

    
<html>
<head>
<style>
   body {
      background-color: lightgray;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   .container {
      background-color: #fff;
      width: 250px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #333;
      border-radius: 8px;
   }
   .border-text {
      font-size: 20px;
      text-align: center;
      color: #333;
      border-block-end: 10px dashed grey;
      padding-block-end: 10px;
      margin-block-end: 10px;
   }
</style>
</head>
<body>
<div class="container">
<p class="border-text">A border-block-end example.</p>
</div>
</body>
</html>

CSS border-block-end - Writing Mode

The following example demonstrates the usage of border-block-end property.

    
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   .container {
      background-color: #f1f1f1;
      width: 180px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 3px solid #ff6f61;
      border-radius: 8px;
      writing-mode: vertical-rl;
   }
   .demo-box {
      font-size: 20px;
      text-align: center;
      color: #333;
      border-block-end: 1rem solid #4caf50;
      padding-block-end: 1.5rem;
      margin-block-end: 1rem;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-box">A border-block-end example with vertical writing mode.</p>
</div>
</body>
</html>