CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style the HTML elements. One of the properties is the border-block property.
The border-block property is used to set the border of a block-level element. A block-level element is an element that takes up the full width available, and has a line break before and after it. The border-block property is a shorthand property that sets the border-width, border-style, and border-color of the top and bottom borders of an element.
The syntax of the border-block property is as follows:
border-block: border-width border-style border-color;
The values for the border-width, border-style, and border-color properties can be specified in any order. If any of the values are not specified, the default value is used. The default value for the border-width property is medium, the default value for the border-style property is none, and the default value for the border-color property is the current color of the element.
Let's take a look at some code examples to understand the border-block property better:
In this example, we will set the border of a block-level element using the border-block property:
<div style="border-block: 2px solid black;"> <p>This is a block-level element with a border.</p> </div>
The output of the above code will be:
This is a block-level element with a border.
In this example, we will set the border of a block-level element using the individual border properties:
<div style="border-top: 2px solid black; border-bottom: 2px solid black;"> <p>This is a block-level element with a border.</p> </div>
The output of the above code will be:
This is a block-level element with a border.
In this example, we will set the border of a block-level element using the border-block-start and border-block-end properties:
<div style="border-block-start: 2px solid black; border-block-end: 2px solid black;"> <p>This is a block-level element with a border.</p> </div>
The output of the above code will be:
This is a block-level element with a border.
In this example, we will set the border of a block-level element using the border-block-start-width, border-block-start-style, border-block-start-color, border-block-end-width, border-block-end-style, and border-block-end-color properties:
<div style="border-block-start-width: 2px; border-block-start-style: solid; border-block-start-color: black; border-block-end-width: 2px; border-block-end-style: solid; border-block-end-color: black;"> <p>This is a block-level element with a border.</p> </div>
The output of the above code will be:
This is a block-level element with a border.
The border-block property is a useful property in CSS that allows us to set the border of a block-level element. We can use the shorthand property or the individual border properties to set the border. By using the border-block property, we can save time and make our code more concise.