CSS - border-block

The CSS shorthand property border-block is a logical property that defines width, style and color of both the start and end in the block dimension at once.

border-block property acts on both the start and finish in the block dimension. The writing mode, directionality, and text orientation of the element determine which precise physical borders are impacted.
When the writing-mode is set to the default horizontal direction, border-block is applied to the top and bottom borders of an element.
Conversely, a vertical writing-mode, applies border-block to the right and left borders.

Possible values

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

Constituent Properties

This property is a shorthand for the following CSS properties:

Syntax

border-block: <border-block-width> || <border-block-style> || <border-block-color>

Applies to

All the HTML elements.

CSS border-block - Basic Example

The following example demonstrates the css border-block property.

<html>
<head>
<style>
   .border-demo {
      width: 300px;
      height: 150px;
      margin: 20px;
      padding: 20px;
      background-color: #f0f0f0;
      border-block: 5px dotted #3498db; 
   }
   .add-demo {
      font-size: 18px;
      color: #111;
   }
</style>
</head>
<body>
<div class="border-demo">
<p class="add-demo">This is a bordered element with padding and background color.</p>
<p>This is an example for border-block property</p>
</div>
</body>
</html>

CSS border-block - writing-mode Property

The following example demonstrates the CSS properties border-block with vertical writing mode.

<html>
<head>
<style>
   .vertical-border {
      writing-mode: vertical-rl;
      direction: ltr;
      width: 150px;
      height: 250px;
      margin: 50px;
      padding: 20px;
      background-color: #f0f0f0;
      border-block: 1rem solid red; 
   }
   .add-style {
      font-size: 18px;
      color: #333;
   }
</style>
</head>
<body>
<div class="vertical-border">
<p class="add-style">This is a vertical bordered element with a solid red border.</p>
</div>
</body>
</html>

Related Properties

The table given below lists some related properties:

Property	Description
border-block	A shorthand property.
border-block-start	A shorthand property for setting the individual logical block-start border property values.
border-block-end	A shorthand property for setting the individual logical block-end border property values.
border-block-color	Defines the color of the logical block borders of an element.
border-block-start-color	Defines the color of the logical block-start border of an element.
border-block-end-color	Defines the color of the logical block-end border of an element.
border-block-style	Defines the style of the logical block borders of an element.
border-block-start-style	Defines the style of the logical block start border of an element.
border-block-end-style	Defines the style of the logical block-end border of an element.
border-block-width	Defines the width of the logical block borders of an element.
border-block-start-width	Defines the width of the logical block-start border of an element.
border-block-end-width	Defines the width of the logical block-end border of an element.

Print Page