CSS Border-Block-Start Simplified Border Styling

### Description

The **`border-block-start`** property in CSS is a handy shorthand for setting the border at the start of the block direction in a single line. It lets you define the width, style, and color of the border, making it easier to adapt your designs to different writing modes and directions. This is especially useful for responsive web design.

### Constituent Properties

The **`border-block-start`** property combines three properties:

1. **`border-block-start-color`**: Sets the color of the border.
2. **`border-block-start-style`**: Defines the style of the border (e.g., solid, dashed).
3. **`border-block-start-width`**: Sets the width of the border.

### Syntax

The syntax for **`border-block-start`** is straightforward:

```css
border-block-start: <border-width> || <border-style> || <color>;

• <border-width>: The width of the border (e.g., 2px, thin, medium, thick).
• <border-style>: The style of the border (e.g., none, dotted, dashed, solid).
• <color>: The color of the border (e.g., blue, #ff0000).

Examples of Syntax

border-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;

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

Values

The border-block-start property can be specified using a combination of values:

1. <border-width>:
   • Length values (e.g., 2px).
   • Keywords (thin, medium, thick).
2. <border-style>:
   • none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
3. <color>:
   • Any valid CSS color value (e.g., blue, #ff0000, rgb(255, 0, 0)).

Global Values:

• inherit: Inherits the value from its parent element.
• initial: Sets the property to its default value.
• revert: Rolls back to the default specified by the user agent.
• revert-layer: Rolls back considering the cascade layer.
• unset: Resets to inherited value if inheritable, or initial value if not.

Formal Definition

The border-block-start property is a shorthand for setting the block-start border properties.

Initial Value

• border-width: medium.
• border-style: none.
• color: canvastext.

Applies To

• All elements.

Inherited

• No, the property is not inherited.

Computed Value

• border-width: Absolute length or 0 if border-style is none or hidden.
• border-style: As specified.
• border-block-start-color: Computed color.

Animation Type

• border-block-start-color: By computed value type.
• border-block-start-style: Discrete.
• border-block-start-width: By computed value type.

Examples

Here are some practical examples to illustrate the usage of border-block-start:

/* Simple border */
border-block-start: 1px solid black;

/* Border with specific style and color */
border-block-start: 2px dashed blue;

/* Using keywords for width */
border-block-start: medium dotted red;

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

Summary

The border-block-start property is a versatile tool for setting the border at the start of the block direction. By combining width, style, and color in a single declaration, you can simplify your CSS and create more adaptable designs. This property is particularly useful for responsive web design, ensuring that your borders look great across different devices and writing modes.

Understanding border-block-start

The border-block-start property in CSS is used to set the width, style, and color of the border at the start of the block direction. This is especially useful for different writing modes and directions, making your web designs more adaptable.

Key Values

• inherit: Takes the value from the parent element.
• initial: Sets the property to its default value.
• revert: Resets the value to the default specified by the browser.
• revert-layer: Resets the value considering the cascade layer.
• unset: Resets to its inherited value if it’s inheritable, or to its initial value if not.

Practical Examples

Basic Usage

HTML:

<div class="example1">
  <p>This is a basic example of the border-block-start property.</p>
</div>

CSS:

.example1 {
  border-block-start: 2px solid blue;
  padding: 10px;
  width: 200px;
}

Output: A blue, solid border with a width of 2 pixels at the start of the block direction.

Different Border Styles

HTML:

<div class="example2">
  <p>This example uses a dashed border style.</p>
</div>

CSS:

.example2 {
  border-block-start: 3px dashed green;
  padding: 10px;
  width: 200px;
}

Output: A green, dashed border with a width of 3 pixels at the start of the block direction.

Combining with Writing Mode

HTML:

<div class="example3">
  <p>This example combines the border-block-start property with writing-mode.</p>
</div>

CSS:

.example3 {
  border-block-start: 4px dotted red;
  writing-mode: vertical-rl;
  padding: 10px;
  width: 200px;
}

Output: A red, dotted border with a width of 4 pixels at the start of the block direction, which is the right side due to the vertical-rl writing mode.

Using Global Values

HTML:

<div class="parent">
  <div class="child">
    <p>This example uses the inherit value.</p>
  </div>
</div>

CSS:

.parent {
  border-block-start: 5px solid purple;
  padding: 10px;
  width: 200px;
}

.child {
  border-block-start: inherit;
  padding: 10px;
}

Output: The child element inherits the border style from the parent element, resulting in a purple, solid border with a width of 5 pixels.

Complex Border with Text Orientation

HTML:

<div class="example5">
  <p>This example combines the border-block-start property with text-orientation.</p>
</div>

CSS:

.example5 {
  border-block-start: 5px solid orange;
  writing-mode: vertical-lr;
  text-orientation: upright;
  padding: 10px;
  width: 200px;
}

Output: An orange, solid border with a width of 5 pixels at the start of the block direction, which is the left side due to the vertical-lr writing mode with upright text orientation.

Border with Vertical Text

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-start: 5px dashed blue;
}

Output: The text is displayed vertically from right to left with a dashed blue border at the top of the text block.

Specifications

The border-block-start property is defined in the CSS Logical Properties and Values Level 1 specification. This specification aims to make it easier to handle border properties in various writing modes and directions.

• CSS Logical Properties and Values Level 1

Browser Compatibility

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

Desktop Browsers

• Google Chrome: Supported since version 69.
• Mozilla Firefox: Supported since version 41.
• Microsoft Edge: Supported since version 79.
• Safari: Supported since version 12.1.
• Opera: Supported since version 56.

Mobile Browsers

• Chrome for Android: Supported since version 69.
• Firefox for Android: Supported since version 41.
• Safari on iOS: Supported since version 12.1.
• Opera Mobile: Supported since version 56.
• Samsung Internet: Supported since version 10.0.

For the most up-to-date information, refer to Can I Use or MDN Web Docs.

See also

For further learning, check out these resources:

• CSS Logical Properties and Values: CSS Logical Properties and Values
• Related Border Properties: border-block-end, border-inline-start, border-inline-end, border-top, border-right, border-bottom, border-left
• Writing Mode and Direction Properties: writing-mode, direction, text-orientation
• Additional Resources: MDN Web Docs, Can I Use