---
title: border-color
slug: Web/CSS/border-color
translation_of: Web/CSS/border-color
---
<div>{{CSSRef}}</div>

<h2 id="概括">概括</h2>

<p><code>CSS属性</code> <strong><code>border-color</code></strong> 是一个用于设置元素四个边框颜色的快捷属性： {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}</p>

<p>{{cssinfo}}</p>

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

<pre class="brush:css">/* border-color: <em>color;</em> 单值语法 */
border-color: red;

/* border-color: <em>vertical horizontal;</em> 双值语法*/
border-color: red #f015ca;

/* border-color: <em>top horizontal bottom; 三值语法</em> */
border-color: red yellow green;

/* border-color: <em>top right bottom left; 四值语法</em> */
border-color: red yellow green blue;

border-color: inherit
</pre>

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

<dl>
 <dt><code>color</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示四个边框的颜色，仅用于单值语法。</dd>
 <dt><code>horizontal</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。</dd>
 <dt><code>vertical</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。</dd>
 <dt><code>top</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示上边框的颜色，仅用于三值或四值语法。</dd>
 <dt><code>bottom</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示下边框的颜色，仅用于三值或四值语法。</dd>
 <dt><code>right</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示右边框的颜色，仅用于四值语法。</dd>
 <dt><code>left</code></dt>
 <dd>使用 {{cssxref("&lt;color&gt;")}} 来表示左边框的颜色，仅用于四值语法。</dd>
 <dt><code>inherit</code></dt>
 <dd>这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。</dd>
</dl>

<h3 id="语法定义">语法定义</h3>

{{csssyntax}}

<h2 id="Complete_border-color_usage2">Complete_border-color_usage2</h2>

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

<pre class="brush: html">&lt;div id="justone"&gt;
  &lt;p&gt;&lt;code&gt;border-color: red;&lt;/code&gt; is equivalent to&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-bottom-color: red;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="horzvert"&gt;
  &lt;p&gt;&lt;code&gt;border-color: gold red;&lt;/code&gt; is equivalent to&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: gold;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="topvertbott"&gt;
  &lt;p&gt;&lt;code&gt;border-color: red cyan gold;&lt;/code&gt; is equivalent to&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-left-color: cyan;&lt;/code&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="trbl"&gt;
  &lt;p&gt;&lt;code&gt;border-color: cyan black gold;&lt;/code&gt; is equivalent to&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-bottom-color: black;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;&lt;code&gt;border-left-color: gold;&lt;/code&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

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

<pre class="brush: css">#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
</pre>

<p>{{ EmbedLiveSample('Complete_border-color_usage2', 600, 300) }}</p>

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



<table class="standard-table" style="font-size: 14px; font-weight: normal; line-height: 1.5;">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#border-color', 'border-color')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td><code>移除了transparent</code> 关键词，该关键词已归入{{cssxref("&lt;color&gt;")}} 数据类型。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>被当作快捷属性</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border-color', 'border-color')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>首次被定义</td>
  </tr>
 </tbody>
</table>



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

{{Compat("css.properties.border-color")}}

<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.0</td>
   <td>{{CompatGeckoMobile("1.9.2")}} [1]</td>
   <td>7.0</td>
   <td>11</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. {{Cssxref("-moz-border-top-colors")}}, {{Cssxref("-moz-border-right-colors")}}, {{Cssxref("-moz-border-bottom-colors")}}, {{Cssxref("-moz-border-left-colors")}}</p>

<h2 id="其他参考">其他参考</h2>

<ul>
 <li>与border-color相关的CSS属性: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}},</li>
 <li>与边框相关的其他CSS属性: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}</li>
</ul>

<div id="gtx-trans" style="position: absolute; left: 101px; top: 1017px;">
<div class="gtx-trans-icon"></div>
</div>