border-style - CSS: Cascading Style Sheets 编辑

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

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

The 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, and left in that order (clockwise).

Each value is a keyword chosen from the list below.

Values

<line-style>
Describes the style of the border. It can have the following values:
noneLike 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.
hiddenLike 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.
dottedDisplays 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.
dashedDisplays 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.
solidDisplays a single, straight, solid line.
doubleDisplays two straight lines that add up to the pixel size defined by border-width.
grooveDisplays a border with a carved appearance. It is the opposite of ridge.
ridgeDisplays a border with an extruded appearance. It is the opposite of groove.
insetDisplays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to 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 set to collapsed, this value behaves like ridge.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typediscrete

Formal syntax

<line-style>{1,4}

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

Examples

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;}

Result

Specifications

SpecificationStatusComment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-style' in that specification.
Candidate RecommendationNo change.
CSS Level 2 (Revision 1)
The definition of 'border-style' in that specification.
RecommendationAdds hidden keyword value.
CSS Level 1
The definition of 'border-style' in that specification.
RecommendationInitial definition.

Browser compatibility

BCD tables only load in the browser

See also

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:68 次

字数:14897

最后编辑:8 年前

编辑次数:0 次

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文