border CSS 属性是一次将所有人的 border 属性值的速记属性：border-width，border-style，和border-color。与所有速记属性一样，任何未指定的单个值都将设置为其相应的初始值。重要的是，border不能用于指定自定义值border-image，而是将其设置为其初始值，即none。
border: 1px; border: 2px dotted; border: medium dashed green;
建议您在要将所有边框属性设置为相同值时使用border。然而，如果你需要用不同的属性值设置不同的边框，您将需要使用手写border-width，border-style和border-color特性，其中每个接受多达四个值。这样可以为每个边设置不同的值，而border仅接受一组边界属性值的元素将相同值应用于元素的每一侧。
|
初始值 |
作为简写的每个属性：border-width：作为简写的每个属性：border-top-width：中等border-right-width：中等border-bottom-width：中等border-left-width：中等border-style：作为简写的每个属性：border-top-style：none border-right-style：none border-bottom-style：none border-left-style：none border-color：作为每个属性的简写：border-top-color：currentcolor border-right-color：currentcolor border-bottom-color：currentcolor border-left-color：currentcolor |
|---|---|
|
适用于 |
所有元素。它也适用于::首字母。 |
|
遗传 |
没有 |
|
媒体 |
视觉 |
|
计算值 |
作为简写的每个属性：border-width：作为简写的每个属性：border-bottom-width：绝对长度，如果border-bottom-style为none或hidden border-left-width则为0：绝对长度，如果border-left-style是none或hidden border，则为0 border-right-width：绝对长度，如果border-right-style为none或hidden，则为0 border-top-width：绝对长度，如果是border-top，则为0 -style是none或hidden border-style：作为速记的每个属性：border-bottom-style：指定的border-left-style：指定的border-right-style：指定的border-top-style：as指定的border-color：作为速记的每个属性：border-bottom-color：计算颜色border-left-color：计算颜色border-right-color：计算颜色 border-top-color：计算颜色 |
|
动画类型 |
作为简写的每个属性：border-color：作为简写的每个属性：border-bottom-color：颜色border-left-color：颜色border-right-color：颜色border-top-颜色：颜色边框样式：离散边框宽度：作为简写的每个属性：border-bottom-width：长度border-left-width：长度border-right-width：长度border-top-宽度：长度 |
|
规范的顺序 |
出现在价值形式语法中的顺序 |
-
border-width：作为速记的每个属性：
- [`border-top-width`](border-top-width): `medium` - [`border-right-width`](border-right-width): `medium` - [`border-bottom-width`](border-bottom-width): `medium` - [`border-left-width`](border-left-width): `medium`
-
border-style：作为速记的每个属性：
- [`border-top-style`](border-top-style): `none` - [`border-right-style`](border-right-style): `none` - [`border-bottom-style`](border-bottom-style): `none` - [`border-left-style`](border-left-style): `none`
-
border-color：作为速记的每个属性：
- [`border-top-color`](border-top-color): `currentcolor` - [`border-right-color`](border-right-color): `currentcolor` - [`border-bottom-color`](border-bottom-color): `currentcolor` - [`border-left-color`](border-left-color): `currentcolor`
Applies to all elements. It also applies to [`::first-letter`](::first-letter). [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
-
border-width: as each of the properties of the shorthand:
- [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden` - [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden` - [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden` - [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
-
border-style：作为速记的每个属性：
- [`border-bottom-style`](border-bottom-style): as specified - [`border-left-style`](border-left-style): as specified - [`border-right-style`](border-right-style): as specified - [`border-top-style`](border-top-style): as specified
-
border-color：作为速记的每个属性：
- [`border-bottom-color`](border-bottom-color): computed color - [`border-left-color`](border-left-color): computed color - [`border-right-color`](border-right-color): computed color - [`border-top-color`](border-top-color): computed color
动画类型作为速记的每个属性：
-
border-color：作为速记的每个属性：
- [`border-bottom-color`](border-bottom-color): a [color](color_value#Interpolation) - [`border-left-color`](border-left-color): a [color](color_value#Interpolation) - [`border-right-color`](border-right-color): a [color](color_value#Interpolation) - [`border-top-color`](border-top-color): a [color](color_value#Interpolation)
-
border-style：离散 -
border-width：作为速记的每个属性：
- [`border-bottom-width`](border-bottom-width): a [length](length#Interpolation) - [`border-left-width`](border-left-width): a [length](length#Interpolation) - [`border-right-width`](border-right-width): a [length](length#Interpolation) - [`border-top-width`](border-top-width): a [length](length#Interpolation)
Canonical order order of appearance in the formal grammar of the values
语法
border属性使用的一个或多个指定的<br-width>，<br-style>和<color>值如下所列。
值
<br-width>边界的厚度。默认为medium如果不存在。看border-width。<br-style>边框的线条样式。默认为none如果不存在。看border-style。<color>边界的颜色。缺省为元素color属性的值。看border-color。
形式语法
<br-width> || <br-style> || <color>where <br-width> = <length> | thin | medium | thick<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>
示例
HTML
<div class="fun-border">Look at my borders.</div> <p>You can edit the CSS below to experiment with border styles!</p> <style contenteditable> .fun-border { border: 2px solid red; } </style>
CSS
style { display: block; border: 1px dashed black; }
结果
规范
|
规范 |
状态 |
评论 |
|---|---|---|
|
CSS背景和边框模块级别3该规范中“边框”的定义。 |
候选推荐 |
删除对透明的支持，因为它现在是一个有效的<color>； 这没有实际影响。尽管无法使用简写将其设置为自定义值，但边框现在会将边框图像重置为其初始值（无）。 |
|
CSS级别2（修订1）该规范中“边框”的定义。 |
建议 |
接受inherit关键字。也接受透明作为有效的颜色。 |
|
CSS级别1该规范中“边框”的定义。 |
建议 |
初始定义。 |
浏览器兼容性
|
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
4.0 |
3.5 |
1.0 (85) |
|
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
|
Basic support |
? |
(Yes) |
1.0 (1.9.2) |
? |
? |
1.0 |