CSS border-block-width Property

The CSS border-block-width property is a powerful tool in the CSS (Cascading Style Sheets) arsenal that enables developers to control the width of borders applied to block-level elements. It enhances the visual appeal and user experience of web components by allowing fine-grained control over border thickness in a way that aligns with the writing mode of the element. In this guide, we will delve into the definition, syntax, values, examples, and related properties of border-block-width.

Definition

The border-block-width property is used to define the width of the border on the block-start and block-end sides of an element. This property is part of the CSS Logical Properties and Values, which allow properties to be expressed in a manner that is independent of the physical writing direction (left-to-right or right-to-left).

Browser Support

As of October 2023, this property is supported by all modern browsers, including:

Browser	Support
Chrome	100%
Firefox	100%
Safari	100%
Edge	100%

Syntax

The syntax for using the border-block-width property can be viewed in different variations:

1. border-block-width: <length>

This form allows you to specify the width as a specific value.

p {
    border-block-width: 10px;
}

2. border-block-width: inherit

This keyword will cause the element to inherit the border width from its parent element.

p {
    border-block-width: inherit;
}

3. border-block-width: initial

This keyword resets the property to its default value, which is medium.

p {
    border-block-width: initial;
}

4. border-block-width: unset

This keyword removes the property and returns it to its inherited value if it has one, or its initial value if it doesn’t.

p {
    border-block-width: unset;
}

Values

The border-block-width property accepts several types of values:

1. <length>

This can be defined in various units, such as pixels (px), ems, and percentages. For instance:

div {
    border-block-width: 5em;
}

2. inherit

Using this value makes the element take the border width from its parent.
Example:

h1 {
    border-block-width: inherit;
}

3. initial

Sets the border width to its default value of medium.

span {
    border-block-width: initial;
}

4. unset

This value is a shorthand that resets the property value to inherit or initial, depending on whether it has a parent.

footer {
    border-block-width: unset;
}

Example

Here’s an example that utilizes the border-block-width property within a simple web page structure. Open a browser to visualize the results:

<style>
  .example-box {
    border-style: solid;
    border-color: blue;
    border-block-width: 5px;
    padding: 20px;
    margin: 20px;
  }
</style>

<div class="example-box">
  This is a block element with a block width border of 5 pixels.
</div>

Related Properties

Several properties work in conjunction with border-block-width, and understanding these will provide a comprehensive grasp of border styling:

1. border-block-start-width

This property specifically sets the width of the border on the block-start side.

div {
    border-block-start-width: 10px;
}

2. border-block-end-width

This property sets the width of the border on the block-end side.

div {
    border-block-end-width: 20px;
}

3. border-width

This traditional property is used to set the width for borders on all sides.

div {
    border-width: 5px;
}

4. border-inline-width

Similar to border-block-width, but it defines the border width for inline sides (left and right).

div {
    border-inline-width: 2px;
}

5. border-inline-start-width

This property sets the width of the border on the inline-start side.

div {
    border-inline-start-width: 6px;
}

6. border-inline-end-width

This property sets the width of the border on the inline-end side.

div {
    border-inline-end-width: 8px;
}

Responsive Example

Understanding responsiveness is essential for modern web design. Below is an example that demonstrates how the border-block-width property can adapt to different screen sizes.

<style>
  .responsive-box {
    border-style: solid;
    border-block-width: 2vw;
    padding: 20px;
    margin: 20px;
  }

  @media (max-width: 600px) {
    .responsive-box {
        border-block-width: 10px;
    }
  }
</style>

<div class="responsive-box">
  This box has a responsive border-block-width which changes on smaller screens.
</div>

FAQ

What is the difference between border-block-width and border-width?

border-block-width is part of the logical properties that define the width of the border based on writing mode, while border-width applies a uniform width to all sides of the element.

Can I use percentages for border-block-width?

No, the border-block-width property does not accept percentage values. It only accepts lengths in fixed units such as pixels or ems.

What happens if no border is defined but the border-block-width is set?

If no border is defined, setting the border-block-width will have no visual effect since CSS does not render a border without defining its style and colour.

Is border-block-width the same as border-top-width?

No, border-block-width manages the width of borders in a logical way, depending on the writing direction, while border-top-width specifically targets the top border regardless of the writing mode.

How does border-block-width behave in RTL languages?

The border-block-width property adjusts according to the writing mode. In right-to-left (RTL) layouts, it would switch roles with block-start and block-end relative to the text direction.