CSS-边框 | border

border: 1px;
border: 2px dotted;
border: medium dashed green;

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

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

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

style {
  display: block;
  border: 1px dashed black;
}