border-block-start-width

Definition

border-block-start-width is a CSS property that defines the width of the border at the block-start edge of an element. It is used to set the width of the top border of an element if the writing mode is vertical and the element is rotated 90 degrees clockwise, or the left border of an element if the writing mode is horizontal.

Examples

To set the width of the top border of an element to 5 pixels:

.my-element {
  border-block-start-width: 5px;
}

To set the width of the left border of an element to 3 pixels:

.my-element {
  writing-mode: horizontal;
  border-block-start-width: 3px;
}

To set the width of the top border of an element to 1 pixel and the width of the left border to 2 pixels:

.my-element {
  writing-mode: vertical;
  border-block-start-width: 1px;
  border-inline-end-width: 2px;
}

To set the width of the top border of an element to 4 pixels and the width of the left border to 3 pixels using vendor-prefixed versions of the property:

.my-element {
  writing-mode: vertical;
  -webkit-border-block-start-width: 4px;
  -moz-border-block-start-width: 4px;
  border-block-start-width: 4px;
  -webkit-border-inline-end-width: 3px;
  -moz-border-inline-end-width: 3px;
  border-inline-end-width: 3px;
}

Values

Best Practices

• Use a length value for maximum compatibility: To ensure that your border widths are displayed consistently across all modern browsers, it's best to use a length value (such as pixels, ems, or rems) when specifying the border-block-start-width property. The thin, medium, and thick values are not fully supported in all browsers, so they should be avoided if possible.
• Consider using vendor-prefixed versions of the property: As mentioned earlier, border-block-start-width is part of the CSS Writing Modes module, which is not fully supported in all modern browsers. In order to ensure that your border widths are displayed correctly in all browsers, you may need to use vendor-prefixed versions of the property, such as -webkit-border-block-start-width and -moz-border-block-start-width.
• Use the initial value to reset the property to its default value: If you need to reset the border-block-start-width property to its default value, you can use the initial value. This can be useful if you have previously set the property to a non-default value and want to return to the default.
• Use the inherit value to inherit the property from the parent element: If you want an element to inherit the border-block-start-width value from its parent element, you can use the inherit value. This can be useful if you want to apply a consistent border width to a group of elements and don't want to specify the width for each element individually.

Browser Compatibility