---
title: border
slug: Web/CSS/border
tags:
  - CSS_参考
translation_of: Web/CSS/border
---
<p>{{ CSSRef() }}</p>

<h2 id="Summary" name="Summary">概览</h2>



<p><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>的border属性是一个用于设置各种单独的边界属性的<a href="Shorthand_properties">简写属性</a>。<code>border可以用于设置一个或多个以下属性的值：</code> {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}。</p>



<p>{{EmbedInteractiveExample("pages/css/border.html")}}</p>

<p>和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对{{cssxref("border-image")}}属性的影响，虽然border属性不能设置这个属性，但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。</p>

<div class="note style-wrap">
<p><strong>注意：</strong> 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色，但boder属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。</p>
</div>

<h3 id="Borders_vs._outlines">Borders vs. outlines</h3>

<p><code>边界border</code>和轮廓<code>outline</code>很相似。然而轮廓在以下方面与边界不同</p>

<ul>
 <li>轮廓不占据空间，他们在元素内容之外绘制</li>
 <li>根据规范，轮廓不必为矩形，尽管通常是矩形。</li>
</ul>

<h2 id="Syntax" name="Syntax">语法</h2>

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

<p>可以使用下面列出的一个，两个或三个值来指定<code>border</code>属性。 值的顺序无关紧要。</p>

<div class="blockIndicator note">
<p>注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。</p>
</div>

<h3 id="Values" name="Values">取值</h3>

<dl>
 <dt>border-width</dt>
 <dd>请看 {{ Cssxref("border-width") }}.</dd>
 <dt>border-style </dt>
 <dd>请看 {{ Cssxref("border-style") }}.</dd>
 <dt>border-color </dt>
 <dd>{{cssxref("&lt;color&gt;")}} 可以确定border的颜色。如果这个值没有设置，它的默认值是元素的{{cssxref("color")}}属性值（是文字颜色而非背景色）。 请看{{ Cssxref("border-color") }}.</dd>
 <dt>
 <h3 id="正式语法">正式语法</h3>

 <pre><code>{{csssyntax}}</code></pre>
 </dt>
</dl>

<h2 id="Examples" name="Examples">示例</h2>

<h3 id="HTML">HTML</h3>

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

<h3 id="CSS">CSS</h3>

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

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample('Example')}}</p>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>在理论上删除了对<code>transparent</code>的支持，因为{{cssxref("&lt;color&gt;")}}已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。<br>
    虽然border不能给{{cssxref("border-image")}}赋特定的值，但可以用于重置{{cssxref("border-image")}}为初始值(<code>none</code>).</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>
    <p>加入<code>inherit</code>关键字。<br>
     接受transparent作为有效的颜色值。</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{Compat("css.properties.border")}}</p>