CSS border-block-start-width A Comprehensive Guide

Learn about CSS border-block-start-width, its use in defining logical block-start border width, and available options like length values and keywords.

Introduction

The border-block-start-width property in CSS sets the width of the logical block-start border of an element. This property adapts to the element’s writing mode, directionality, and text orientation, making it useful for responsive design. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property, depending on the text orientation and direction.

Baseline Widely Available

The border-block-start-width property has been widely supported since September 2021. For detailed compatibility information, refer to the Browser Compatibility section.

Description

The border-block-start-width CSS property sets the width of the logical block-start border of an element. This border corresponds to the top, right, bottom, or left border, depending on the element’s writing mode, directionality, and text orientation. This property helps create visually appealing and responsive designs, adapting to different layouts and text directions.

Syntax

/* <'border-width'> values */
border-block-start-width: 5px;
border-block-start-width: thick;

/* Global values */
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;

Explanation

<border-width> values: Specify the border width using lengths (e.g., 5px) or keywords like thin, medium, and thick.
Global values: Include inherit, initial, revert, revert-layer, and unset.

Values

The border-block-start-width property accepts values that define the width of the logical block-start border.

`<border-width>`

Length values: Specify the border width using units like pixels (px), ems (em), or percentages (%).
```
border-block-start-width: 5px;
border-block-start-width: 2em;
border-block-start-width: 10%;
```

Predefined keywords: thin, medium, thick.

border-block-start-width: thin;
border-block-start-width: medium;
border-block-start-width: thick;

Global Values

inherit: Inherits the value from the parent element.
```
border-block-start-width: inherit;
```
initial: Resets the property to its initial value (medium).
```
border-block-start-width: initial;
```
revert: Resets the property to the user agent’s default value.
```
border-block-start-width: revert;
```
revert-layer: Resets the property to the value established by the user-agent stylesheet or the user stylesheet.
```
border-block-start-width: revert-layer;
```
unset: Resets the property to its inherited value if it inherits, or to its initial value if it does not.
```
border-block-start-width: unset;
```

Formal Definition

Property	Value
Initial value	`medium`
Applies to	All elements
Inherited	No
Percentages	Refers to the logical width of the containing block
Computed value	Absolute length; `0` if the border style is `none` or `hidden`
Animation type	By computed value type

Formal Syntax

border-block-start-width = <line-width>

<line-width> =
  <length> |
  thin |
  medium |
  thick

Explanation

<line-width>: Defines the border width using a length value or keywords.
<length>: Represents a length value (e.g., 5px, 2em, 10%).
thin: Sets the border width to thin.
medium: Sets the border width to medium (default).
thick: Sets the border width to thick.

Examples

Basic Usage

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-block-start-width Property</title>
  <style>
    div {
      border: 2px solid black;
      border-block-start-width: 5px;
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>Hello, World!</div>
</body>
</html>

Using Predefined Keywords

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-block-start-width Property</title>
  <style>
    .thin {
      border: 2px solid black;
      border-block-start-width: thin;
      background-color: lightblue;
      padding: 10px;
    }
    .medium {
      border: 2px solid black;
      border-block-start-width: medium;
      background-color: lightgreen;
      padding: 10px;
    }
    .thick {
      border: 2px solid black;
      border-block-start-width: thick;
      background-color: lightcoral;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="thin">Thin Border</div>
  <div class="medium">Medium Border</div>
  <div class="thick">Thick Border</div>
</body>
</html>

Vertical Text with `border-block-start-width`

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-block-start-width Property</title>
  <style>
    div {
      background-color: yellow;
      width: 120px;
      height: 120px;
    }
    .exampleText {
      writing-mode: vertical-lr;
      border: 1px solid blue;
      border-block-start-width: 5px;
    }
  </style>
</head>
<body>
  <div>
    <p class="exampleText">Example text</p>
  </div>
</body>
</html>

Specifications

The border-block-start-width property is defined in the CSS Logical Properties and Values Level 1 specification.

Key Specification

CSS Logical Properties and Values Level 1: Includes detailed information about the border-block-start-width property. Refer to the CSS Logical Properties and Values Level 1 document for comprehensive details.

Browser Compatibility

The border-block-start-width property is widely supported across modern web browsers.

Supported Browsers

Chrome: Supported since version 69.
Firefox: Supported since version 41.
Opera: Supported since version 56.
Edge: Supported since version 79.
Safari: Supported since version 12.1.

Browser Compatibility Data Tables

For detailed compatibility information, refer to resources like MDN Web Docs and Can I Use.

Tips for Ensuring Compatibility

Check for Feature Support: Use tools like Can I Use to check for the support of the border-block-start-width property in different browsers.
Fallback Styles: Implement fallback styles to ensure functionality in unsupported browsers.
Test Across Browsers: Always test your web design across multiple browsers and versions.