border-block

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

{{InteractiveExample("CSS Demo: border-block")}}

border-block: solid;
writing-mode: horizontal-tb;

border-block: dashed red;
writing-mode: vertical-rl;

border-block: 1rem solid;
writing-mode: horizontal-tb;
direction: rtl;

<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: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Constituent properties

This property is a shorthand for the following CSS properties:

• {{cssxref("border-block-color")}}
• {{cssxref("border-block-style")}}
• {{cssxref("border-block-width")}}

Syntax

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

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

Values

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

• <'border-width'>
  • : The width of the border. See {{cssxref("border-width")}}.
• <'border-style'>
  • : The line style of the border. See {{cssxref("border-style")}}.
• {{CSSXref("<color>")}}
  • : The color of the border.

Description

border-block can be used to set the values for one or more of {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, and {{cssxref("border-block-color")}} setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}} and {{cssxref("border-bottom")}} or {{cssxref("border-right")}}, and {{cssxref("border-left")}} properties depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

The borders in the other dimension can be set with {{cssxref("border-inline")}}, which sets {{cssxref("border-inline-start")}}, and {{cssxref("border-inline-end")}}.

Formal definition

{{CSSInfo}}

Formal syntax

{{csssyntax}}

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: 5px dashed blue;
}

Results

{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• CSS Logical Properties and Values
• This property maps to one of the physical border properties: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}}.
• {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}