CSS border-block-end-style Property

This property defines the line style for the logical block-end border of an element, mapping to different physical borders depending on the writing mode.

selector { border-block-end-style: value; }
none Specifies that no border is drawn, resulting in a computed width of 0.
hidden Same as none, but used to resolve border conflicts in CSS tables.
dotted Renders the border as a series of circular dots.
dashed Renders the border as a series of short rectangular line segments.
solid Renders the border as a single, continuous, straight line.
double Renders two parallel solid lines with some space between them.
groove Renders a border with a carved appearance based on the color value.
ridge Renders a border with a raised appearance, the opposite of groove.
inset Renders a border that makes the element appear embedded in the page.
outset Renders a border that makes the element appear to pop out from the page.

Code Examples

A basic example showing a solid blue border applied to the logical end of a block element.

<div style="border-block-end-style: solid; border-block-end-width: 5px; border-block-end-color: #2196f3; padding: 10px;">
  This element has a solid logical block-end border.
</div>

An advanced example using JavaScript to toggle the writing mode, demonstrating how the logical border shifts from the bottom to the left side.

<div id="demoBox" style="border-block-end: 4px dashed #ff5722; padding: 20px; writing-mode: horizontal-tb;">
  Toggle the writing mode to see the logical border move.
</div>
<button onclick="toggleMode()">Toggle Writing Mode</button>

<script>
function toggleMode() {
  const box = document.getElementById("demoBox");
  if (box.style.writingMode === "horizontal-tb") {
    box.style.writingMode = "vertical-rl";
  } else {
    box.style.writingMode = "horizontal-tb";
  }
}
</script>

Pro Tip

If you are using the shorthand border-block-end, you can define the width, style, and color all at once. It is a massive time-saver. Think of logical properties as future-proofing your design for a global audience.

Deep Dive

Think of this property like the finish line of a race. In a standard English document, the finish line is at the bottom of the content block. If you rotate the entire track for a vertical writing mode like Japanese, the finish line moves to the side. border-block-end-style ensures your border follows that finish line regardless of how the text flows. Unlike the physical border-bottom-style, which is glued to the bottom of the screen, this logical property is glued to the end of the content flow. It is part of the CSS Logical Properties and Values specification, aimed at making international layouts easier to manage without writing separate styles for every language direction.

Best Practices

Use this property when building layouts that need to support multiple languages or writing modes. It is cleaner than manually switching between border-bottom and border-left in your media queries or language-specific classes. Pair it with border-block-end-width and border-block-end-color to ensure the border actually appears, as the default width is 0 and the default style is none.

Common Pitfalls

A common mistake is forgetting that the border will not show up if the width is 0 or the color is transparent, even if you set a style. Also, remember that this only affects the end side of the block dimension; if you want the start side, you need border-block-start-style. Do not expect this to work in very old browsers like Internet Explorer.

Accessibility

Visual styles like dashed or dotted can help users with color blindness distinguish boundaries that might otherwise rely solely on color. Ensure that the contrast ratio between the border color and the background meets WCAG standards so the style is clearly visible to everyone.

Dev Data Table: border-block-end-style property

default none
animatable no
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderBlockEndStyle = "dashed";
js_syntax_2 element.style.setProperty("border-block-end-style", "dashed");
js_note Target this property in JavaScript using camelCase as borderBlockEndStyle for direct style object manipulation.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...