CSS - border-block-end-style Property

The logical block-end border style of an element is defined by the border-block-end-style CSS property. Based on the writing mode, directionality, and text orientation of the element, this logical border matches a physical border style.

The values given for writing-mode, direction and text-orientation attributes define the actual border-top-style, border-right-style, or border-left-style.
The additional border styles of the element are defined by related attributes border-block-start-style, border-inline-start-style, and border-inline-end-style.

Possible values

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

Syntax

border-block-end-style = <line-style>

Applies to

All the HTML elements.

CSS border-block-end-style - None Style

The following example demonstrates the usage of border-block-end-style property with none style value.

<html>
<head>
<style>
   .container {
      background-color: #d1e3ff;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-end-style: none; 
      border-block-end-width: 8px;
      padding: 10px;
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is a border-block-end-style example with none style.</p>
</div>
</body>
</html>

CSS border-block-end-style - Hidden Style

The following example demonstrates the usage of border-block-end-style property with hidden style value.

<html>
<head>
<style>
   .container {
      background-color: #f3ffd1;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
   }
   .demo-border {
      border-block-end-style: hidden; 
      border-block-end-width: 8px;
      padding: 10px;
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">This is a border-block-end-style example with hidden style.</p>
</div>
</body>
</html>

CSS border-block-end-style - Dotted Style

The following example demonstrates the usage of border-block-end-style property with dotted style value.

<html>
<head>
<style>
   .container {
      background-color: #99e0f2;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
   }
   .demo-border {
      border: 3px solid grey;
      border-block-end-style: dotted;
      border-block-end-width: 6px;
      border-block-end-color: #0e58c7;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with dotted style</p>
</div>
</body>
</html>

CSS border-block-end-style - Dashed Style

The following example demonstrates the usage of border-block-end-style property with dashed style value.

<html>
<head>
<style>
   .container {
      background-color: #acf2bb;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
   }
   .demo-border {
      border: 3px solid grey;
      border-block-end-style: dashed;
      border-block-end-width: 6px;
      border-block-end-color: #069e27;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with dashed style</p>
</div>
</body>
</html>

CSS border-block-end-style - Solid Style

The following example demonstrates the usage of border-block-end-style property with solid style value.

<html>
<head>
<style>
   .container {
      background-color: #e8f0c7;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed grey;
      border-block-end-style: solid;
      border-block-end-width: 6px;
      border-block-end-color: #8ba808;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with solid style</p>
</div>
</body>
</html>

CSS border-block-end-style - Double Style

The following example demonstrates the usage of border-block-end-style property with double style value.

<html>
<head>
<style>
   .container {
      background-color: #f1f2eb;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: double;
      border-block-end-width: 10px;
      border-block-end-color: #ba5609;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with double style</p>
</div>
</body>
</html>

CSS border-block-end-style - Groove Style

The following example demonstrates the usage of border-block-end-style property with groove style value.

<html>
<head>
<style>
   .container {
      background-color: #f2f2d3;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px solid #3b1a02;
      border-block-end-style: groove;
      border-block-end-width: 10px;
      border-block-end-color: #babd0b;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with groove style</p>
</div>
</body>
</html>

CSS border-block-end-style - Ridge Style

The following example demonstrates the usage of border-block-end-style property with ridge style value.

<html>
<head>
<style>
   .container {
      background-color: #f0e0c7;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: ridge;
      border-block-end-width: 10px;
      border-block-end-color: #d6880b;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with ridge style</p>
</div>
</body>
</html>

CSS border-block-end-style - Inset Style

The following example demonstrates the usage of border-block-end-style property with inset style value.

<html>
<head>
<style>
   .container {
      background-color: #eef5c6;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: inset;
      border-block-end-width: 8px;
      border-block-end-color: #a7c404;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with inset style</p>
</div>
</body>
</html>

CSS border-block-end-style - Outset Style

The following example demonstrates the usage of border-block-end-style property with outset style value.

<html>
<head>
<style>
   .container {
      background-color: #a0e8a4;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   .demo-border {
      border: 3px dashed #3b1a02;
      border-block-end-style: outset;
      border-block-end-width: 8px;
      border-block-end-color: #07e312;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-end-style property example with outset style</p>
</div>
</body>
</html>