Mastering CSS border-block A Comprehensive Guide

Introduction

The border-block CSS property is a handy shorthand for setting the logical block border properties of an element in one go. It’s been around since September 2021 and works great across many devices and browsers. This property makes it easy to define the width, style, and color of borders that follow the logical block direction of an element, which is super useful for web development and design.

Baseline Compatibility

The border-block property is widely supported and has been available since September 2021. It works well across various devices and browsers, making it a reliable option for consistent and effective border styling in your projects.

For detailed compatibility info, check out these resources:

• Learn more
• See full compatibility
• Report feedback

Description

The border-block property in CSS is a shorthand for setting the logical block border properties of an element. It lets you define the width, style, and color of borders that follow the logical block direction in one declaration. This is especially useful for elements with different writing modes, directions, and text orientations.

By using border-block, you can easily control the appearance of block borders. It combines the properties of border-block-width, border-block-style, and border-block-color into one, saving time and making your CSS more readable.

Usage and Examples

The border-block property is easy to use and can be applied to any element to set its logical block border properties. Here’s the basic syntax and some examples:

Basic Syntax

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

You can specify one, two, or all three properties in any order.

Examples

Simple Border

HTML:

<div class="example">
  <p>This is an example paragraph with a block border.</p>
</div>

CSS:

.example {
  background-color: yellow;
  width: 200px;
  height: 100px;
  border-block: 5px dashed blue;
}

Output: This creates a dashed blue border with a width of 5px around the block dimension of the .example element.

Vertical Text with Border

HTML:

<div class="vertical-text">
  <p>Vertical Text Example</p>
</div>

CSS:

.vertical-text {
  writing-mode: vertical-rl;
  border-block: 5px solid red;
  background-color: lightgray;
  width: 100px;
  height: 200px;
}

Output: This creates a solid red border with a width of 5px around the block dimension of the .vertical-text element, which is oriented vertically.

Combining with Other Properties

HTML:

<div class="combined-styles">
  <p>Combining border-block with other properties.</p>
</div>

CSS:

.combined-styles {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  border-block: 3px dotted green;
  padding: 10px;
  margin: 20px;
}

Output: This creates a dotted green border with a width of 3px around the block dimension of the .combined-styles element, along with padding and margin.

Tips for Using border-block

1. Consistency: Use border-block for elements where you want consistent border styles across different writing modes and directions.
2. Readability: Combining properties into one declaration makes your CSS more readable and easier to manage.
3. Flexibility: The border-block property adapts to the element’s writing mode, making it versatile for various text orientations.

Constituent Properties

The border-block property combines several individual properties to set the logical block border properties of an element. These include:

1. border-block-width

   • Specifies the width of the logical block borders using lengths or keywords like thin, medium, and thick.

2. border-block-style

   • Defines the style of the logical block borders, such as solid, dashed, dotted, double, groove, ridge, inset, and outset.

3. border-block-color

   • Sets the color of the logical block borders using any valid CSS color value.

Example

HTML:

<div class="example-block">
  <p>This is an example paragraph with block borders.</p>
</div>

CSS:

.example-block {
  background-color: lightgray;
  width: 200px;
  height: 100px;
  border-block: 5px dashed blue;
}

In this example, the border-block property sets a dashed blue border with a width of 5px around the block dimension of the .example-block element.

Formal Definition

The border-block property is a shorthand for setting multiple logical block border properties. It combines the values for border width, style, and color.

Initial Value

• border-block-width: medium
• border-block-style: none
• border-block-color: currentcolor

Applies To

All elements.

Inherited

No, the border-block property is not inherited.

Computed Value

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

Animation Type

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

Formal Syntax

border-block =
  [<'border-block-start'>]

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

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

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

Browser Compatibility

The border-block property is well-supported across many browsers, ensuring that your web designs remain consistent and functional across different platforms. It has been available since September 2021, making it a reliable choice for modern web development and design.

For detailed compatibility info, check out these resources:

• Learn more
• See full compatibility
• Report feedback

Browser Compatibility Table

Tips for Ensuring Compatibility

1. Test Across Browsers: Always test your web designs across different browsers to ensure consistency.
2. Use Fallbacks: For older browsers that may not support the border-block property, consider using fallbacks or polyfills.
3. Stay Updated: Keep your browsers and development tools updated to benefit from the latest features and improvements.

Specifications

The border-block property is defined in the CSS Logical Properties and Values Level 1 specification. This specification outlines the behavior and usage of logical properties, ensuring consistency and standardization across different implementations.

For more information, you can refer to the official specification:

• CSS Logical Properties and Values Level 1

See Also

For further reading and related properties, you can explore the following resources:

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

Help Improve MDN

Was this page helpful to you?

• Yes
• No

If you found this information useful, consider contributing to MDN to help improve the documentation for other developers.

• Learn how to contribute

This page was last modified on Jul 18, 2023 by MDN contributors.

• View this page on GitHub
• Report a problem with this content

By ensuring the border-block property is properly supported and implemented, you can create robust and visually appealing web designs that work seamlessly across different devices and browsers.