CSS border-block-start-style Define Logical Border Styles

Introduction

The border-block-start-style CSS property lets you set the style of the logical block start border of an element. This is great for making designs that adapt to different text directions and writing modes. It’s been around since September 2021 and works on many devices and browsers.

Specification

The border-block-start-style property is defined in the CSS Logical Properties and Values Level 1 specification. This spec helps make styling more flexible and adaptable to different writing modes and directions.

For more details, check out the CSS Logical Properties and Values Level 1 specification.

Description

The border-block-start-style property sets the border style at the start of a block, regardless of the writing mode or text direction. This makes it easier to create flexible designs that adapt to different languages and writing systems.

Syntax

Here’s how you use the border-block-start-style property:

/* <'border-style'> values */
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

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

Explanation of Values

• <‘border-style’> values: Styles like dashed, dotted, groove, etc.
• Global values: Common values like inherit, initial, revert, etc.

Values

The border-block-start-style property can take various values:

<'border-style'> Values

• none: No border.
• hidden: Same as none, but different for border-collapsed tables.
• dotted: A series of dots.
• dashed: A series of short dashes.
• solid: A single, solid line.
• double: Two solid lines.
• groove: Appears carved into the page.
• ridge: Appears coming out of the page.
• inset: Appears embedded in the page.
• outset: Appears coming out of the page.

Global Values

• inherit: Inherits from the parent element.
• initial: Sets to the default state.
• revert: Resets to the default state.
• revert-layer: Resets to the default state for the cascade layer.
• unset: Acts as inherit or initial.

Formal Definition

Initial Value

• Initial Value: none
  • The default value is none, meaning no border.

Applies To

• Applies To: All elements
  • Can be applied to all HTML elements.

Inherited

• Inherited: No
  • This property is not inherited from the parent element.

Computed Value

• Computed Value: As specified
  • The computed value is what you set.

Animation Type

• Animation Type: Discrete
  • Changes are immediate and do not animate smoothly.

Formal Syntax

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

<line-style> =
  none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Examples

Here are some examples to show how to use the border-block-start-style property:

Example 1: Dashed 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-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}

Example 2: Dotted Border with Horizontal Text

CSS

.exampleText {
  writing-mode: horizontal-tb;
  border: 5px solid green;
  border-block-start-style: dotted;
}

Example 3: Groove Border with Right-to-Left Text

CSS

.exampleText {
  writing-mode: horizontal-tb;
  direction: rtl;
  border: 5px solid red;
  border-block-start-style: groove;
}

Browser Compatibility

The border-block-start-style property is widely supported across many devices and browsers. It’s been available since September 2021.

Compatibility Table

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

Tips for Ensuring Compatibility

1. Progressive Enhancement: Make sure your app works even if some CSS properties aren’t supported.
2. Feature Detection: Use tools like Modernizr to detect browser support.
3. Testing: Test your website across different browsers and devices.

For detailed compatibility info, check out the MDN Web Docs Browser Compatibility Data.

See Also

For further exploration and deeper understanding of related CSS properties and concepts, check out these resources:

• CSS Logical Properties and Values: Learn about logical properties and values in CSS to create more adaptable web designs.
• Related Border Properties:
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
• Writing Mode and Direction Properties:
  • writing-mode
  • direction
  • text-orientation

These resources will help you understand how to use logical properties effectively and how they interact with other CSS properties to create dynamic and responsive web designs.

Related Properties

Understanding the border-block-start-style CSS property is just the beginning. Here are several related properties that work together to give you greater control over the border styles of your elements.

Logical Border Properties

• border-block-end-style: Defines the style of the logical block end border.
• border-inline-start-style: Sets the style of the logical inline start border.
• border-inline-end-style: Sets the style of the logical inline end border.

Physical Border Properties

• border-top-style: Defines the style of the top border.
• border-right-style: Defines the style of the right border.
• border-bottom-style: Defines the style of the bottom border.
• border-left-style: Defines the style of the left border.

Writing Mode and Direction Properties

• writing-mode: Specifies the writing mode of the text.
• direction: Defines the text direction (left-to-right or right-to-left).
• text-orientation: Controls the orientation of text within a line box.

Example of Combined Usage

Here’s an example of how these properties can be used together to create a comprehensive border style for an element:

HTML

<div class="example">
  <p>Example text with comprehensive border styles</p>
</div>

CSS

.example {
  background-color: lightblue;
  width: 200px;
  height: 200px;
  writing-mode: vertical-rl;
  direction: rtl;
  border: 5px solid black;
  border-block-start-style: dashed;
  border-block-end-style: dotted;
  border-inline-start-style: groove;
  border-inline-end-style: ridge;
}

In this example, logical and physical border properties are combined with writing mode and direction properties to create a complex border style that adapts to the text orientation and writing system.

Conclusion

Using these related properties can greatly enhance your web designs, making them more responsive and adaptable. By combining logical and physical border properties with writing mode and direction properties, you can ensure that your designs look great and work well across different text orientations and writing systems.