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 important properties in CSS is the border-block-width property.
The border-block-width property is used to set the width of the border on the block-level elements. The block-level elements are the elements that take up the full width of the parent element and start on a new line. The border-block-width property is a shorthand property that sets the width of the top, right, bottom, and left borders of an element.
The syntax of the border-block-width property is as follows:
border-block-width: value;
The value of the border-block-width property can be specified in different units such as pixels, ems, rems, percentages, etc. The default value of the border-block-width property is medium.
Let's see some code examples to understand the usage of the border-block-width property.
In this example, we will set the border-block-width property to 5 pixels for the div element.
<div style="border-block-width: 5px;"> <p>This is a sample text.</p> </div>
The above code will set the border-block-width of the div element to 5 pixels. The output will be as follows:
This is a sample text.
In this example, we will set different border-block-widths for the top, right, bottom, and left borders of the div element.
<div style="border-block-width: 5px 10px 15px 20px;"> <p>This is a sample text.</p> </div>
The above code will set the border-block-width of the div element to 5 pixels for the top border, 10 pixels for the right border, 15 pixels for the bottom border, and 20 pixels for the left border. The output will be as follows:
This is a sample text.
In this example, we will set the border-block-width property using different units such as ems, rems, and percentages.
<div style="border-block-width: 2em 3rem 10% 20px;"> <p>This is a sample text.</p> </div>
The above code will set the border-block-width of the div element to 2 ems for the top border, 3 rems for the right border, 10% for the bottom border, and 20 pixels for the left border. The output will be as follows:
This is a sample text.
In this example, we will inherit the border-block-width property from the parent element.
<div style="border-block-width: 5px;"> <div style="border: 2px solid; padding: 10px;"> <p>This is a sample text.</p> </div> </div>
The above code will set the border-block-width of the outer div element to 5 pixels. The inner div element will inherit the border-block-width property from the outer div element. The output will be as follows:
This is a sample text.
The border-block-width property is an important property in CSS that is used to set the width of the border on the block-level elements. It is a shorthand property that sets the width of the top, right, bottom, and left borders of an element. The value of the border-block-width property can be specified in different units such as pixels, ems, rems, percentages, etc. It is a useful property that helps in styling the HTML elements.