border | CSS

在此页

组成特性
句法
描述
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

border 简写 CSS property sets an element's border. It sets the values of border-width , border-style ，和 border-color .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

组成特性

此特性是下列 CSS 特性的简写：

句法

/* 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;

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

注意： The border will be invisible if its style is not defined. This is because the style defaults to none .

值

<line-width>: Sets the thickness of the border. Defaults to medium if absent. See border-width .
<line-style>: Sets the style of the border. Defaults to none if absent. See border-style .
<color>: Sets the color of the border. Defaults to currentcolor if absent. See border-color .

描述

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 .

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 , border-style ，和 border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) 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.

形式定义

初始值	as each of the properties of the shorthand: `border-width` : as each of the properties of the shorthand: `border-top-width` : `medium` `border-right-width` : `medium` `border-bottom-width` : `medium` `border-left-width` : `medium` `border-style` : as each of the properties of the shorthand: `border-top-style` : `none` `border-right-style` : `none` `border-bottom-style` : `none` `border-left-style` : `none` `border-color` : as each of the properties of the shorthand: `border-top-color` : `currentcolor` `border-right-color` : `currentcolor` `border-bottom-color` : `currentcolor` `border-left-color` : `currentcolor`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	as each of the properties of the shorthand: `border-width` : as each of the properties of the shorthand: `border-bottom-width` : the absolute length or `0` if `border-bottom-style` is `none` or `hidden` `border-left-width` : the absolute length or `0` if `border-left-style` is `none` or `hidden` `border-right-width` : the absolute length or `0` if `border-right-style` is `none` or `hidden` `border-top-width` : the absolute length or `0` if `border-top-style` is `none` or `hidden` `border-style` : as each of the properties of the shorthand: `border-bottom-style` ：如指定 `border-left-style` ：如指定 `border-right-style` ：如指定 `border-top-style` ：如指定 `border-color` : as each of the properties of the shorthand: `border-bottom-color` ：计算颜色 `border-left-color` ：计算颜色 `border-right-color` ：计算颜色 `border-top-color` ：计算颜色
动画类型	as each of the properties of the shorthand: `border-color` : as each of the properties of the shorthand: `border-bottom-color` : a color `border-left-color` : a color `border-right-color` : a color `border-top-color` : a color `border-style` : discrete `border-width` : as each of the properties of the shorthand: `border-bottom-width` : a length `border-left-width` : a length `border-right-width` : a length `border-top-width` : a length

形式句法

<line-width> || <line-style> || <color>where 
<line-width> = <length> | thin | medium | thick
<line-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} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

范例

Setting a pink outset border

HTML

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

CSS

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

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border' in that specification.	候选推荐	移除 specific support for `transparent` , as it is now a valid `<color>` ; 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.	推荐	Accepts the `inherit` keyword. Also accepts `transparent` as a valid color.
CSS Level 1 The definition of 'border' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

元数据

最后修改： Jul 30, 2020

在此页