1. Web
  2. CSS
  3. border-style

border-style

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

border-style 简写 CSS 属性用于设置元素所有四条边框的样式。

试一试

border-style: none;

border-style: dotted;

border-style: inset;

border-style: dashed solid;

border-style: dashed double none;

border-style: dashed groove none dotted;

<section 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: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

构成属性

此属性是以下 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 属性可以使用一个、两个、三个或四个值来指定。

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

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

值

<line-style>

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

none

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

hidden

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

dotted

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

dashed

显示一系列短的方形末端虚线或线段。线段的精确大小和长度未由规范定义，且取决于具体实现。

solid

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

double

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

groove

显示具有雕刻外观的边框。它与 ridge 相反。

ridge

显示具有凸出外观的边框。它与 groove 相反。

inset

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

outset

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

正式定义

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

正式语法

border-style = 
  <'border-top-style'>{1,4}  

<border-top-style> = 
  <line-style>  

<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 Backgrounds and Borders Module Level 3
# border-style

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.