CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border-block-width

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.

Brief Explanation of Border-Block-Width

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.

Code Examples

Let's see some code examples to understand the usage of the border-block-width property.

Example 1: Setting the Border-Block-Width

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.

Example 2: Setting Different Border-Block-Widths

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.

Example 3: Using Different Units for Border-Block-Width

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.

Example 4: Inheriting Border-Block-Width

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.

Conclusion

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.

References

Activity