border-width

border-width: thick;

border-width: 1em;

border-width: 4px 1.25em;

border-width: 2ex 1.25ex 0.5ex;

border-width: 0 4px 8px 12px;

<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: #000;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

/* 关键字值 */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> 值 */
border-width: 4px;
border-width: 1.2rem;

/* 顶部和底部 | 左侧和右侧 */
border-width: 2px 1.5em;

/* 顶部 | 左侧和右侧 | 底部 */
border-width: 1px 2em 1.5cm;

/* 顶部 | 右侧 | 底部 | 左侧 */
border-width: 1px 2em 0 4rem;

/* 全局值 */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

<p id="one-value">一个值：四边均有 6px 的边框宽度。</p>
<p id="two-values">
  两个不同的值：顶部和底部边框宽 2px，右侧和左侧边框宽 10px。
</p>
<p id="three-values">
  三个不同的值：顶部为 0.3em，底部为 9px，右侧和左侧的宽度为零。
</p>
<p id="four-values">
  四个不同的值：顶部为“thin”，右侧为“medium”，底部为“thick”，左侧为 1em。
</p>

#one-value {
  border: ridge #ccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}