Understanding CSS border-block-end for Responsive Design

Description

The border-block-end CSS property is a shorthand that lets you set the width, style, and color of the border at the end of a block element in one place. It’s great for making your web designs look good and adapt to different text directions, like left-to-right or right-to-left languages.

Syntax

The syntax for border-block-end is simple:

border-block-end: <border-width> | <border-style> | <color>;

• <border-width>: Sets the border width (e.g., 2px, thin, medium, thick).
• <border-style>: Sets the border style (e.g., solid, dotted, dashed, double).
• <color>: Sets the border color (e.g., blue, #ff0000, rgb(255, 0, 0)).

Examples

Example 1: Basic Usage

HTML

<div class="example-one">
  This is an example with a border at the block-end.
</div>

CSS

.example-one {
  background-color: lightgray;
  padding: 20px;
  border-block-end: 5px solid blue;
}

Result

This adds a 5-pixel solid blue border at the block-end of the div.

Example 2: Vertical Text with Border

HTML

<div class="example-two">
  <p class="example-text">Example text</p>
</div>

CSS

.example-two {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.example-text {
  writing-mode: vertical-rl;
  border-block-end: 5px dashed blue;
}

Result

This adds a 5-pixel dashed blue border at the block-end of the vertically oriented p.

Example 3: Combining Multiple Values

HTML

<div class="example-three">
  This is an example with a border that combines multiple values.
</div>

CSS

.example-three {
  background-color: lightgray;
  padding: 20px;
  border-block-end: 3px dotted red;
}

Result

This adds a 3-pixel dotted red border at the block-end of the div.

Example 4: Responsive Design

HTML

<div class="example-four" dir="rtl">
  This is an example with a border that adapts to directionality.
</div>

CSS

.example-four {
  background-color: lightgray;
  padding: 20px;
  border-block-end: 4px solid green;
}

Result

This adds a 4-pixel solid green border at the block-end of the div, which is set to right-to-left directionality.

Formal Syntax

The formal syntax for border-block-end is:

border-block-end =
  <line-width> [||]
  <line-style> [||]
  <color>;

• <line-width>: Sets the border width (e.g., <length>, thin, medium, thick).
• <line-style>: Sets the border style (e.g., none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset).
• <color>: Sets the border color.

The double bar (||) means one or several values must be present, in any order. Examples include:

border-block-end: 2px;
border-block-end: dashed;
border-block-end: blue;
border-block-end: 2px dashed blue;

Global values like inherit, initial, revert, revert-layer, and unset are also supported.

Browser Compatibility

• 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.

Related Properties

• Logical Border Properties:

  • border-block-start
  • border-inline-start
  • border-inline-end

• Physical Border Properties:

  • border-top
  • border-right
  • border-bottom
  • border-left

• Writing Mode and Direction Properties:

  • writing-mode
  • direction
  • text-orientation

See Also

• CSS Logical Properties and Values
• MDN Web Docs Browser Compatibility Data

Using border-block-end helps create responsive and adaptable designs that align with text flow, ensuring a consistent user experience across different devices and browsers.

These tips and resources will help you understand how to use logical properties in your CSS effectively. By using these tools, you can create more adaptable, responsive, and visually appealing web designs that work well with different text directions and writing styles.