mozilla

Version 89889 von border-color

  • Adressname der Version: CSS/border-color
  • Titel der Version: border-color
  • ID der Version: 89889
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 16 words added, 8 words removed

Inhalt der Version

{{ CSSRef() }}

Übersicht

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

  • Standardwert: Wert der color Eigenschaft
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: der berechnete Standardwert der color Eigenschaft; sonst wie festgelegt

Syntax

border-color:  [ <Farbe> || transparent ]{1,4} | inherit

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

Browser Kompatibilität

Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Mozilla Erweiterungen

In Gecko-Browsern, wie Firefox, stehen folgende Eigenschaften zur Verfügung, um mehrere Farben für einen Rahmen zu definieren:
-moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/border-color", "fr": "fr/CSS/border-color", "pl": "pl/CSS/border-color", "es": "es/CSS/border-color" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3>Übersicht</h3>
<p>Die <code>border-color</code> Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.</p>
<ul> <li>Standardwert: Wert der <a href="/de/CSS/color" rel="internal"><code>color</code></a> Eigenschaft</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: der berechnete Standardwert der <code>color</code> Eigenschaft; sonst wie festgelegt</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">border-color:  [ &lt;Farbe&gt; || transparent ]{1,4} | inherit
</pre>
<h3>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>
<h3>Beispiele</h3>
<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>
<h3>Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>Mozilla Erweiterungen</h3>
<p>In Gecko-Browsern, wie Firefox, stehen folgende Eigenschaften zur Verfügung, um <strong>mehrere Farben</strong> für einen Rahmen zu definieren:<br>
<a href="/de/CSS/-moz-border-top-colors" title="en/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a>, <a href="/de/CSS/-moz-border-right-colors" title="en/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a>, <a href="/de/CSS/-moz-border-bottom-colors" title="en/CSS/-moz-border-bottom-colors"><code>-moz-border-bottom-colors</code></a>, <a href="/de/CSS/-moz-border-left-colors" title="en/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a></p>
<h3>Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-color" lang="en">CSS 3 Background and Borders #border-color</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-color" lang="en">CSS 2.1 Box #border-color</a></li>
</ul>
<h3>Siehe auch</h3>
<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>
<p>{{ languages( { "en": "en/CSS/border-color", "fr": "fr/CSS/border-color", "pl": "pl/CSS/border-color", "es": "es/CSS/border-color" } ) }}</p>
Zu dieser Version zurücksetzen