[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-block-start-width [Back]  [Original]

border-block-start-width CSS property - CSS | MDN

border-block-start-width CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since January 2020.

The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

In this article

Try it

border-block-start-width: thick;
writing-mode: horizontal-tb;
border-block-start-width: thick;
writing-mode: vertical-rl;
border-block-start-width: 4px;
writing-mode: horizontal-tb;
border-block-start-width: 4px;
writing-mode: vertical-lr;
<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

css
/* <'line-width'> values */
border-block-start-width: 5px;
border-block-start-width: thick;

/* Global values */
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;

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

Values

<line-width>

Defines the width of the border, either as an explicit non-negative <length> or the keywords: thin, medium, or thick. The default is medium.

Formal definition

Initial valuemedium
Applies toall elements
Inheritedno
Computed valuethe absolute <length>, snapped as a line width
Animation typeby computed value type

Formal syntax

border-block-start-width = 
<line-width>

<line-width> =
<length [0,]> |
hairline |
thin |
medium |
thick
This syntax reflects the latest standard as per CSS Borders and Box Decorations Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

Border width with vertical text

HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-start-width: 5px;
}

Results

Specifications

Specification
CSS Logical Properties and Values Module Level 1
# border-width

Browser compatibility

See also


Web Proxy Viewer  |  New URL  |  Original Page