border-style

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-style 简写 CSS property sets the line style for all four sides of an element's border.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

组成特性

此特性是下列 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;
/* vertical | horizontal */
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;

border-style property may be specified using one, two, three, or four values.

When one value is specified, it applies the same style to all four sides .
When two values are specified, the first style applies to the top and bottom , the second to the left and right .
When three values are specified, the first style applies to the top , the second to the left and right , the third to the bottom .
When four values are specified, the styles apply to the top , right , bottom ，和 left in that order (clockwise).

Each value is a keyword chosen from the list below.

值

<line-style>

Describes the style of the border. It can have the following values:

`none`		Like the `hidden` keyword, displays no border. Unless a `background-image` is set, the computed value of the same side's `border-width` will be `0` , even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the lowest priority: if any other conflicting border is set, it will be displayed.
`hidden`		Like the `none` keyword, displays no border. Unless a `background-image` is set, the computed value of the same side's `border-width` will be `0` , even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the highest priority: if any other conflicting border is set, it won't be displayed.
`dotted`		Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's `border-width` .
`dashed`		Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
`solid`		Displays a single, straight, solid line.
`double`		Displays two straight lines that add up to the pixel size defined by `border-width` .
`groove`		显示具有雕刻外观的边框。它相反于 `ridge` .
`ridge`		Displays a border with an extruded appearance. It is the opposite of `groove` .
`inset`		Displays a border that makes the element appear embedded. It is the opposite of `outset` . When applied to a table cell with `border-collapse` 设为 `collapsed` , this value behaves like `groove` .
`outset`		Displays a border that makes the element appear embossed. It is the opposite of `inset` . When applied to a table cell with `border-collapse` 设为 `collapsed` , this value behaves like `ridge` .

形式定义

初始值	as each of the properties of the shorthand: `border-top-style` : `none` `border-right-style` : `none` `border-bottom-style` : `none` `border-left-style` : `none`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	as each of the properties of the shorthand: `border-bottom-style` ：如指定 `border-left-style` ：如指定 `border-right-style` ：如指定 `border-top-style` ：如指定
动画类型	discrete

形式句法

<line-style>{1,4}where 
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

范例

Table with all property values

Here is an example of all the property values.

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

/* Define look of the table */
table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}
/* 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 The definition of 'border-style' in that specification.	候选推荐	无变化。
CSS Level 2 (Revision 1) The definition of 'border-style' in that specification.	推荐	添加 `hidden` keyword value.
CSS Level 1 The definition of 'border-style' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-style`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项完整支持 1 注意事项注意事项 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 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 3	Chrome Android 完整支持 18	Firefox Android 完整支持 4 注意事项完整支持 4 注意事项注意事项 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 完整支持 14	Safari iOS 完整支持 3	Samsung Internet Android 完整支持 1.0

图例

完整支持
见实现注意事项。

另请参阅

The border-related shorthand CSS properties: border , border-width , border-color , border-radius

元数据

最后修改： Jul 27, 2020

在此页