border-style

**border-style** 简写 CSS 属性设置元素边框所有四边的线型。

试一试

构成属性

此属性是以下 CSS 属性的简写形式

语法

css
/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

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

border-style 属性可以使用一个、两个、三个或四个值来指定。

  • 当指定**一个**值时，它会将相同的样式应用于**所有四边**。
  • 当指定**两个**值时，第一个样式应用于**顶部和底部**，第二个样式应用于**左侧和右侧**。
  • 当指定**三个**值时，第一个样式应用于**顶部**，第二个样式应用于**左侧和右侧**，第三个样式应用于**底部**。
  • 当指定**四个**值时，样式会按照**顶部**、**右侧**、**底部**和**左侧**的顺序（顺时针方向）依次应用。

每个值都是从以下列表中选择的关键字。

Values

<line-style>

描述边框的样式。它可以具有以下值

none

与 hidden 关键字类似，不显示边框。除非设置了 background-image，否则同一侧 border-width 的计算值将为 0，即使指定的值为其他值。在表格单元格和边框折叠的情况下，none 值具有最低优先级：如果设置了任何其他冲突的边框，则会显示该边框。

hidden

与 none 关键字类似，不显示边框。除非设置了 background-image，否则同一侧 border-width 的计算值将为 0，即使指定的值为其他值。在表格单元格和边框折叠的情况下，hidden 值具有最高优先级：如果设置了任何其他冲突的边框，则不会显示该边框。

dotted

显示一系列圆点。点的间距未由规范定义，并且是特定于实现的。点的半径是同一侧 border-width 计算值的一半。

dashed

显示一系列短的方形末端短划线或线段。段的确切大小和长度未由规范定义，并且是实现特定的。

实线

显示一条直的、实心的线。

双线

显示两条直线，其总和为由border-width定义的像素大小。

凹槽

显示具有雕刻外观的边框。它是ridge的反义词。

脊状

显示具有挤出外观的边框。它是groove的反义词。

inset

显示使元素看起来嵌入的边框。它是outset的反义词。当应用于border-collapse设置为collapsed的表格单元格时，此值的行为类似于ridge。

凸出

显示使元素看起来浮雕的边框。它是inset的反义词。当应用于border-collapse设置为collapsed的表格单元格时，此值的行为类似于groove。

正式定义

初始值作为简写符号的每个属性
应用于所有元素。它也适用于::first-letter。
继承否
计算值作为简写符号的每个属性
动画类型离散

正式语法

border-style = 
  <line-style>{1,4}  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

示例

所有属性值

以下是一些属性值的示例。

HTML

html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

CSS

css
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/* border-style example classes */
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}

结果

规范

规范
CSS 背景和边框模块 Level 3
# border-style

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅