mozilla

Version 503433 von border-color

  • Adressname der Version: Web/CSS/border-color
  • Titel der Version: border-color
  • ID der Version: 503433
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Ja
  • Kommentar

Inhalt der Version

{{ CSSRef("CSS Borders") }}

Übersicht

Die border-color Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.

{{cssbox("border-color")}}

Syntax

border-color:  {{csssyntax("border-color")}}

Werte

<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
inherit
Der Wert des Elternelements wird geerbt.
Ein Wert
Gilt für alle vier Seiten: border-top-color, border-right-color, border-bottom-color und border-left-color.
Zwei Werte
Der erste Wert gilt für border-top-color und border-bottom-color, der zweite Wert für border-right-color und border-left-color.
Drei Werte
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color und border-left-color und der dritte Wert für border-bottom-color.
Vier Werte
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color, der dritte Wert für border-bottom-color und der vierte Wert für border-left-color.

Beispiele

.beispielEins {                      
  border: solid;
  border-color: blue;
}
.beispielZwei {
  border: solid;
  border-color: blue #f00;
}
.beispielDrei {
  border: solid;
  border-color: blue #f00 rgb(0,150,0);
}
.beispielVier {
  border: solid;
  border-color: blue #f00 rgb(0,150,0) transparent;
}

Spezifikation

Spezifikation Status Anmerkung
{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }} {{ Spec2('CSS3 Backgrounds') }} The transparent keyword has been removed as it is now a part of the {{ xref_csscolorvalue() }} data type.
{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }} {{ Spec2('CSS2.1') }} The property is now a shorthand property
{{ SpecName('CSS1', '#border-color', 'border-color') }} {{ Spec2('CSS1') }}  

Browser Kompatibilität

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} [1] 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.2") }} [1] {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[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") }}

Siehe auch

Quelltext der Version

<p>{{ CSSRef("CSS Borders") }}</p>
<h2 id=".C3.9Cbersicht">Übersicht</h2>
<p>Die <code>border-color</code> Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.</p>
<p>{{cssbox("border-color")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
border-color:  {{csssyntax("border-color")}}
</pre>
<h3 id="Werte">Werte</h3>
<dl>
 <dt>
  &lt;Farbe&gt;</dt>
 <dd>
  <a href="/de/CSS/Farben" rel="internal">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd>
 <dt>
  transparent</dt>
 <dd>
  Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
 <dt>
  Ein Wert</dt>
 <dd>
  Gilt für alle vier Seiten: <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a>, <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd>
 <dt>
  Zwei Werte</dt>
 <dd>
  Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a> und <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd>
 <dt>
  Drei Werte</dt>
 <dd>
  Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a> und der dritte Wert für <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a>.</dd>
 <dt>
  Vier Werte</dt>
 <dd>
  Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a>, der dritte Wert für <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a> und der vierte Wert für <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<pre style="border: solid;border-color: blue;">
.beispielEins {                      
  border: solid;
  border-color: blue;
}
</pre>
<pre style="border: solid; border-color: blue #f00;">
.beispielZwei {
  border: solid;
  border-color: blue #f00;
}
</pre>
<pre style="border: solid; border-color: blue #f00 rgb(0,150,0);">
.beispielDrei {
  border: solid;
  border-color: blue #f00 rgb(0,150,0);
}
</pre>
<pre style="border: solid; border-color: blue #f00 rgb(0,150,0) transparent;">
.beispielVier {
  border: solid;
  border-color: blue #f00 rgb(0,150,0) transparent;
}
</pre>
<h2 id="Specifications">Spezifikation</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{ xref_csscolorvalue() }} data type.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>The property is now a shorthand property</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser Kompatibilität</h2>
<p>{{ CompatibilityTable() }}</p>
<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&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatGeckoMobile("1.9.2") }} [1]</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>[1] The following Mozilla extensions set the border sides to <strong>multiple</strong> 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="Siehe_auch">Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/border" title="de/CSS/border"><code>border</code></a></li>
 <li><a href="/de/CSS/border-bottom-color" title="de/CSS/border-bottom-color"><code>border-bottom-color</code></a>, <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a></li>
</ul>
Zu dieser Version zurücksetzen