border shorthand CSS 屬性可用來設定元素的邊框。它可以設定以下的值 border-width (en-US)border-style (en-US) 以及 border-color (en-US)

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image, but instead sets it to its initial value, i.e., none.

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width (en-US), border-style (en-US), and border-color (en-US) properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top (en-US) ) and logical (e.g., border-block-start (en-US)) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element's content.
  • According to the spec, outlines don't have to be rectangular, although they usually are.


/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none.


Sets the thickness of the border. Defaults to medium if absent. See border-width (en-US).
Sets the style of the border. Defaults to none if absent. See border-style (en-US).
<color> (en-US)
Sets the color of the border. Defaults to currentcolor if absent. See border-color (en-US).

Formal syntax

<line-width> || (en-US) <line-style> || (en-US) <color> (en-US)

<line-width> = <length> (en-US) | (en-US) thin | (en-US) medium | (en-US) thick
<line-style> = none | (en-US) hidden | (en-US) dotted | (en-US) dashed | (en-US) solid | (en-US) double | (en-US) groove | (en-US) ridge | (en-US) inset | (en-US) outset
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> (en-US) | (en-US) currentcolor | (en-US) <deprecated-system-color> (en-US)

<rgb()> = rgb( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )

<alpha-value> = <number> (en-US) | (en-US) <percentage> (en-US)
<hue> = <number> (en-US) | (en-US) <angle> (en-US)



<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>


div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;



Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border' in that specification.
Candidate Recommendation Removes specific support for transparent, as it is now a valid <color> (en-US); this has no practical impact.
Though it cannot be set to a custom value using the shorthand, border now resets border-image to its initial value (none).
CSS Level 2 (Revision 1)
The definition of 'border' in that specification.
Recommendation Accepts the inherit keyword. Also accepts transparent as a valid color.
CSS Level 1
The definition of 'border' in that specification.
Recommendation Initial definition.

預設值as each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Computed value (en-US)as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Browser compatibility

BCD tables only load in the browser