CSS border-block-start-style Property
Description
The border-block-start-style
is a CSS property that allows you to define the style of the border on the block-start side of an element in a block-level context, typically in the context of vertical writing modes like when using Asian or Middle Eastern scripts. It lets you specify whether the border should be solid, dashed, dotted, or any other supported line style, enabling fine-grained control over the appearance of the border on the top side of a block-level element when text is written vertically. This property is part of the CSS Box Alignment Module Level 3 and is useful for creating aesthetically pleasing and culturally appropriate designs in vertical text layouts.
- Initial value
- none
- Applies to
- all elements
- Inherited
- no
- Computed value
- as specified
- Animatable
- discrete
- JavaScript syntax
- object.style.borderBlockStartStyle
Interactive Demo
Block Start Style Property
Syntax
border-block-start-style: <border-style>
Values
- <border-style>Specifies the style of the border
Example
<div class="box">
This is a box with a border.
</div>
.box {
border-block: 5px dashed;
border-block-color: green;
border-block-start-width: 5px;
border-block-start-color: red;
border-block-start-style: dashed;
writing-mode: vertical-rl;
}
Browser Support
The following table will show you the current browser support for the CSS border-block-start-style
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
87 | 87 | 66 | 73 | 14.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
87 | 66 | 62 | 14.5 | 14 | 87 |
Last updated by CSSPortal on: 1st January 2024