CSS Border-Block-End-Style Control Logical Block-End Border

border-block-end-style CSS Property

The border-block-end-style CSS property defines the style of the logical block-end border of an element. This border style changes depending on the element’s writing mode, directionality, and text orientation. It corresponds to properties like border-top-style, border-right-style, border-bottom-style, or border-left-style based on the values of writing-mode, direction, and text-orientation.

Description and Purpose

The border-block-end-style property defines the style of the logical block-end border of an element. It allows precise control over the appearance of borders in various contexts, such as different writing modes, text orientations, and directions. This property is essential for creating visually appealing and responsive web designs.

Syntax and Values

The border-block-end-style property allows you to specify the style of the logical block-end border of an element. Here is the syntax:

border-block-end-style: <'border-style'> | inherit | initial | revert | revert-layer | unset;

Values

• border-style: Defines the style of the border. Possible values include:
  • none: No border.
  • hidden: Same as none, except in terms of border conflict resolution 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 to be carved into the page.
  • ridge: Opposite of groove. Appears to be coming out of the page.
  • inset: Appears to be embedded in the page.
  • outset: Opposite of inset. Appears to be coming out of the page.
• inherit: Inherits the border style from the parent element.
• initial: Sets the border style to its initial value (none).
• revert: Resets the border style to the default defined by the browser.
• revert-layer: Resets the border style to the default defined by the browser, considering the cascade layers.
• unset: Resets the border style to its natural value, which means it behaves like inherit if the property is inherited, or like initial if the property is not inherited.

Example Usage

Here is an example of how to use the border-block-end-style property in CSS:

.example {
  border: 5px solid blue;
  border-block-end-style: dashed;
}

In this example, the border-block-end-style property sets the style of the block-end border to dashed. This will apply a dashed border to the logical end of the block, which could be the bottom, right, or another side depending on the writing mode and text orientation.

Related Properties

The border-block-end-style property is part of a broader set of CSS properties that control the appearance of borders on HTML elements. These related properties provide comprehensive control over various border styles and positions, making it easier to create visually appealing and responsive web designs. Here are some of the key related properties:

1. border-block-start-style: Defines the style of the logical block-start border of an element.
2. border-inline-start-style: Specifies the style of the logical inline-start border of an element.
3. border-inline-end-style: Defines the style of the logical inline-end border of an element.
4. border-top-style: Sets the style of the top border of an element.
5. border-right-style: Sets the style of the right border of an element.
6. border-bottom-style: Sets the style of the bottom border of an element.
7. border-left-style: Sets the style of the left border of an element.

Formal Definition

The border-block-end-style property defines the style of the logical block-end border of an element. Here are the key characteristics:

Formal Syntax

The formal syntax for the border-block-end-style property is as follows:

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

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

Explanation of Values

• none: No border is applied.
• hidden: Same as none, except in terms of border conflict resolution 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 to be carved into the page.
• ridge: Opposite of groove. Appears to be coming out of the page.
• inset: Appears to be embedded in the page.
• outset: Opposite of inset. Appears to be coming out of the page.

Example Usage

Here are some examples illustrating how to use the border-block-end-style property in CSS:

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-end-style: dashed;
}

Example 2: Dotted Border on a Div

HTML

<div class="dottedBorder">
  This is a sample text.
</div>

CSS

.dottedBorder {
  background-color: lightgray;
  width: 200px;
  height: 100px;
  border: 5px solid black;
  border-block-end-style: dotted;
}

Example 3: Double Border on a Block Element

HTML

<div class="doubleBorder">
  This is a sample block element.
</div>

CSS

.doubleBorder {
  background-color: lightblue;
  width: 250px;
  height: 150px;
  border: 5px solid green;
  border-block-end-style: double;
}

Example 4: Groove Border on a Paragraph

HTML

<p class="grooveBorder">
  This is a sample paragraph with a groove border.
</p>

CSS

.grooveBorder {
  background-color: lightgreen;
  width: 300px;
  height: 100px;
  border: 5px solid red;
  border-block-end-style: groove;
}

Summary

The border-block-end-style property is an essential tool in CSS for defining the style of the logical block-end border of an element. By following the formal syntax and understanding the various values, developers can achieve precise and consistent styling of borders in their web designs. This property is widely supported and compatible with many devices and browser versions, making it a reliable choice for enhancing the visual appearance of web elements.

For more information on the border-block-end-style property, including detailed examples and compatibility, refer to the full documentation.

Specifications

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

• CSS Logical Properties and Values Level 1

Browser Compatibility

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

For more information on compatibility, refer to detailed documentation and full compatibility tables.

Related Resources

• CSS Logical Properties and Values
• Physical Border Properties
• Writing Mode, Direction, and Text Orientation

These resources provide additional context and information on how to use the border-block-end-style property effectively in your web designs.

See Also

For more information on related topics and properties, check out these resources:

• CSS Logical Properties and Values
• Physical Border Properties
• Writing Mode
• Direction
• Text Orientation
• Border-Block-Start-Style
• Border-Inline-Start-Style
• Border-Inline-End-Style