border-style

概述

border-style 是一个 CSS 简写属性,用来设定元素所有边框的样式。

注意:border-style 默认值是 none,这意味着如果您只修改 border-widthborder-color 是不会出现边框的。

语法

/* Apply to all four sides */
border-style: dashed;

/* horizontal | vertical */
border-style: dotted solid;

/* top | horizontal | 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: unset;

取值

<br-style>
关键字用于描述边框样式。它可以有以下取值:
none
和关键字 hidden 类似,不显示边框。在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,none 值优先级最低,意味着如果存在其他的重叠边框,则会显示为那个边框。
hidden
和关键字 none 类似,不显示边框。在这种情况下,如果没有设定背景图片,border-width 计算后的值将是 0,即使先前已经指定过它的值。在单元格边框重叠情况下,hidden 值优先级最高,意味着如果存在其他的重叠边框,边框不会显示。
dotted
显示为一系列圆点。标准中没有定义两点之间的间隔大小,视不同实现而定。圆点半径是 border-width 计算值的一半。
dashed
显示为一系列短的方形虚线。标准中没有定义线段的长度和大小,视不同实现而定。
solid
显示为一条实线。
double
显示为一条双实线,宽度是 border-width
groove
显示为有雕刻效果的边框,样式与 ridge 相反。
ridge
显示为有浮雕效果的边框,样式与 groove 相反。
inset
显示为有陷入效果的边框,样式与 outset 相反。当它指定到 border-collapsecollapsed 的单元格时,会显示为 groove 的样式。
outset

显示为有突出效果的边框,样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时,会显示为 ridge 的样式。

正式语法

<line-style>{1,4}

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

示例

包含所有属性取值的表格

以下是一个所有取值的例子

HTML

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

CSS

/* 定义表格外观 */
table {
    border-width: 3px;
    background-color: #52E396;
}
tr, td {
    padding: 2px;
}

/* border-style 示例 */
.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;}

输出

规范

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
border-style
Candidate Recommendation No change
CSS Level 2 (Revision 1)
border-style
Recommendation Added the 2-, 3- and 4-value syntaxes
CSS Level 1
border-style
Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-styleChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

另请参阅