---
title: border-block
slug: Web/CSS/border-block
translation_of: Web/CSS/border-block
---
<div>{{CSSRef}}</div>

<p>该<a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>属性是一个<a href="/en-US/docs/Web/CSS/Shorthand_properties">简写属性</a>在样式表一个单一的地方设置单独的逻辑块边界属性值。<strong><code>border-block</code></strong></p>

<pre class="brush:css no-line-numbers notranslate">border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;
</pre>

<p><code>border-block</code> 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")}}.</p>

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

<h2 id="Constituent_properties">Constituent properties</h2>

<p>This property is a shorthand for the following CSS properties:</p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/border-block-color"><code>border-block-color</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/border-block-style"><code>border-block-style</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/border-block-width"><code>border-block-width</code></a></li>
</ul>

<h2 id="Syntax">Syntax</h2>

<h3 id="Values">Values</h3>

<p>The <code>border-block</code> is specified with one or more of the following, in any order:</p>

<dl>
 <dt><code>&lt;'border-width'&gt;</code></dt>
 <dd>The width of the border. See {{cssxref("border-width")}}.</dd>
 <dt><code>&lt;'border-style'&gt;</code></dt>
 <dd>The line style of the border. See {{cssxref("border-style")}}.</dd>
 <dt><code>&lt;'color'&gt;</code></dt>
 <dd>The color of the border. See {{cssxref("color")}}.</dd>
</dl>

<h2 id="Formal_definition">Formal definition</h2>

<p>{{CSSInfo}}</p>

<h2 id="Formal_syntax">Formal syntax</h2>

{{csssyntax}}

<h2 id="Examples">Examples</h2>

<h3 id="Border_with_vertical_text">Border with vertical text</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block: 5px dashed blue;
}</pre>

<h4 id="Results">Results</h4>

<p>{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td>
   <td>{{Spec2("CSS Logical Properties")}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">此页面中的兼容性表是根据结构化数据生成的。如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们​​发送请求请求。</div>

<p>{{Compat("css.properties.border-block")}}</p>

<h2 id="也可以看看">也可以看看</h2>

<ul>
 <li>此属性映射到以下物理边界属性之一：{{cssxref("border-top")}}，{{cssxref("border-right")}}，{{cssxref("border-bottom")}}，或{{cssxref("border-left")}}。</li>
 <li>{{cssxref("writing-mode")}}，{{cssxref("direction")}}，{{cssxref("text-orientation")}}}</li>
</ul>