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

结果

​

规范

浏览器兼容性