Web/CSS/border-block-start

The border-block-start CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;

border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.

Related properties are border-block-end, border-inline-start, and border-inline-end, which define the other borders of the element.

Values

The border-block-start is specified with one or more of the following, in any order:

<'border-width'>: The width of the border. See border-width.
<'border-style'>: The line style of the border. See border-style.
<'color'>: The color of the border. See color.

Formal definition

Initial value	as each of the properties of the shorthand: `border-width`: as each of the properties of the shorthand: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: as each of the properties of the shorthand: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `color`: Varies from one browser to another
Applies to	all elements
Inherited	no
Computed value	as each of the properties of the shorthand: `border-width`: as each of the properties of the shorthand: `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden` `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden` `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden` `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden` `border-style`: as each of the properties of the shorthand: `border-bottom-style`: as specified `border-left-style`: as specified `border-right-style`: as specified `border-top-style`: as specified `border-block-start-color`: computed color
Animation type	as each of the properties of the shorthand: `border-block-start-color`: a color `border-block-start-style`: discrete `border-block-start-width`: a length

Formal syntax

<'border-top-width'> || <'border-top-style'> || <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

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-rl;
  border-block-start: 5px dashed blue;
}

Specifications

Specification	Status	Comment
CSS Logical Properties and Values Level 1The definition of 'border-block-start' in that specification.	Editor's Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-block-start`	Chrome Full support 69	Edge Full support 79	Firefox Full support 41 Full support 41 No support 38 — 51 Disabled' Disabled' From version 38 until version 51 (exclusive): this feature is behind the `layout.css.vertical-text.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 56	Safari Full support 12.1	WebView Android Full support 69	Chrome Android Full support 69	Firefox Android Full support 41 Full support 41 No support 38 — 51 Disabled' Disabled' From version 38 until version 51 (exclusive): this feature is behind the `layout.css.vertical-text.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 48	Safari iOS Full support 12.2	Samsung Internet Android Full support 10.0

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.