CSS border-block-end-width Flexible Border Control

Formal Definition

The border-block-end-width CSS property defines the width of the logical block-end border of an element. Here are its key aspects:

• Initial Value: medium
• Applies To: All elements
• Inherited: No
• Percentages: Relative 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

The formal syntax for border-block-end-width is:

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

<line-width> = [<length [0,∞]> | thin | medium | thick]

In this syntax:

• <line-width> can be specified using:
  • A length value (e.g., 5px or 2em).
  • Predefined keywords: thin, medium, or thick.

Values

• <'border-width'>: Defines the width using lengths (e.g., 5px) or keywords (e.g., thick).
• Global values: Control inheritance and default behavior:
  • inherit: Inherits from the parent element.
  • initial: Sets to the initial value.
  • revert: Rolls back to the user-agent stylesheet value.
  • revert-layer: Rolls back to the value of the next outer CSS layer.
  • unset: Resets to its natural value, behaving like inherit if inherited, or initial if not.

Examples

Basic Usage

HTML

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

CSS

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

.exampleText {
  border: 1px solid blue;
  border-block-end-width: 5px;
}

Description Sets the logical block-end border to 5px.

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: 1px solid blue;
  border-block-end-width: 5px;
}

Description Sets the logical block-end border to 5px for vertical text.

Different Border Widths

HTML

<div class="container">
  <p class="exampleText1">Example text 1</p>
  <p class="exampleText2">Example text 2</p>
</div>

CSS

.container {
  background-color: lightgray;
  padding: 20px;
}

.exampleText1 {
  border: 1px solid red;
  border-block-end-width: 3px;
}

.exampleText2 {
  border: 1px solid green;
  border-block-end-width: 7px;
}

Description Sets different logical block-end border widths for two paragraphs.

Specifications

The border-block-end-width property is defined in the CSS Logical Properties and Values Level 1 specification. This ensures it is well-documented and standardized.

Related Properties

• border-block-start-width: Defines the logical block-start border width.
• border-inline-start-width: Defines the logical inline-start border width.
• border-inline-end-width: Defines the logical inline-end border width.

Supported Browsers

The border-block-end-width property is supported in:

• Chrome: Version 69 and later
• Firefox: Version 41 and later
• Opera: Version 56 and later
• Edge: Version 79 and later
• Safari: Version 12.1 and later

See Also

For more information, check out:

• CSS Logical Properties and Values
• Physical Border Properties:
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
• Related Properties:
  • border-block-start-width
  • border-inline-start-width
  • border-inline-end-width
• Text and Writing Properties:
  • writing-mode
  • direction
  • text-orientation

These resources will help you understand how to use logical properties effectively in your web projects.