border-block-start

Definition

border-block-start is a shorthand property for setting the width, style, and color of the border at the block-start edge of an element. The block-start edge is the top edge of an element if the writing mode is vertical and the element is rotated 90 degrees clockwise, or the left edge of an element if the writing mode is horizontal.

Examples

To set the width of the top border of an element to 5 pixels, the style of the top border to solid, and the color of the top border to purple:

.my-element {
  border-block-start: 5px solid purple;
}

To set the width of the left border of an element to 3 pixels, the style of the left border to dashed, and the color of the left border to red:

.my-element {
  writing-mode: horizontal;
  border-block-start: 3px dashed red;
}

To set the width of the top border of an element to 1 pixel, the style of the top border to dotted, and the color of the top border to green, and the width of the left border to 2 pixels, the style of the left border to solid, and the color of the left border to blue:

.my-element {
  writing-mode: vertical;
  border-block-start: 1px dotted green;
  border-inline-end: 2px solid blue;
}

To set the width of the top border of an element to 4 pixels, the style of the top border to double, and the color of the top border to black, and the width of the left border to 3 pixels, the style of the left border to groove, and the color of the left border to gray using vendor-prefixed versions of the property:

.my-element {
  writing-mode: vertical;
  -webkit-border-block-start: 4px double black;
  -moz-border-block-start: 4px double black;
  border-block-start: 4px double black;
  -webkit-border-inline-end: 3px groove gray;
  -moz-border-inline-end: 3px groove gray;

Values

Best Practices

• Use the border-block-start shorthand property to set the width, style, and color of the border at the block-start edge of an element in a single line of code, rather than setting each value separately with the individual border-block-start-* properties. This can make your code more concise and easier to read.
• Use the writing-mode property to specify the orientation of the block-start and block-end edges of an element. This can help ensure that your borders are displayed correctly, depending on the writing mode of your document.
• Use vendor-prefixed versions of the border-block-start property to ensure compatibility with different browsers. Some browsers may require the use of vendor-specific prefixes, such as -webkit-, -moz-, or -ms-, in order to support the property.
• Test your code in different browsers to ensure that your borders are displayed correctly. Use tools such as Can I use to check the compatibility of various CSS properties and features in different browsers.
• Use the border-collapse property to specify whether or not borders are collapsed in a table. This can affect how border-block-start is applied to elements in a table.

Browser Compatibility