边框 | border

border

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