目录

CSS border-style 属性


示例

设置边框样式:

div {border-style: dotted;}
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

这个border-style属性设置元素的四个边框的样式。该属性可以有一到四个值。

例子:

  • 边框样式:点实线双虚线;
    • 顶部边框是虚线的
    • 右边框是实心的
    • 底部边框是双边框
    • 左边框是虚线

  • 边框样式:点实双;
    • 顶部边框是虚线的
    • 左右边框是实心的
    • 底部边框是双边框

  • 边框样式:点实线;
    • 顶部和底部边框是点状的
    • 左右边框是实心的

  • 边框样式:点线;
    • 所有四个边框都是点状的

展示演示❯

默认值: 没有任何
遗传:
可动画: 不。阅读可动画的
版本: CSS1
JavaScript 语法: 对象.style.borderStyle="dotted double"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
border-style 1.0 4.0 1.0 1.0 3.5


CSS 语法

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性值

Value Description Demo
none Default value. Specifies no border Demo ❯
hidden The same as "none", except in border conflict resolution for table elements Demo ❯
dotted Specifies a dotted border Demo ❯
dashed Specifies a dashed border Demo ❯
solid Specifies a solid border Demo ❯
double Specifies a double border Demo ❯
groove Specifies a 3D grooved border. The effect depends on the border-color value Demo ❯
ridge Specifies a 3D ridged border. The effect depends on the border-color value Demo ❯
inset Specifies a 3D inset border. The effect depends on the border-color value Demo ❯
outset Specifies a 3D outset border. The effect depends on the border-color value Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

虚线边框:

div {border-style: dashed;}
亲自试一试 »

示例

实心边框:

div {border-style: solid;}
亲自试一试 »

示例

双边框:

div {border-style: double;}
亲自试一试 »

示例

凹槽边框:

div {
  border-style: groove;
  border-color: coral;
  border-width: 7px;
}
亲自试一试 »

示例

山脊边界:

div {
  border-style: ridge;
  border-color: coral;
  border-width: 7px;
}
亲自试一试 »

示例

插入边框:

div {
  border-style: inset;
  border-color: coral;
  border-width: 7px;
}
亲自试一试 »

示例

起始边界:

div {
  border-style: outset;
  border-color: coral;
  border-width: 7px;
}
亲自试一试 »

示例

在元素的每一侧设置不同的边框:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
亲自试一试 »

相关页面

CSS教程:CSS 边框

HTML DOM 参考:borderStyle 属性