border-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Probieren Sie es aus
Jede Seite kann individuell eingestellt werden, indem Sie border-top-color
, border-right-color
, border-bottom-color
und border-left-color
verwenden; oder unter Verwendung der schreibmoduserkennenden border-block-start-color
, border-block-end-color
, border-inline-start-color
und border-inline-end-color
.
Weitere Informationen über Rahmenfarben finden Sie unter Anwenden von Farben auf HTML-Elemente.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* <color> values */
border-color: red;
/* top and bottom | left and right */
border-color: red #f015ca;
/* top | left and right | bottom */
border-color: red rgb(240 30 50 / 70%) green;
/* top | right | bottom | left */
border-color: red yellow green blue;
/* Global values */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;
Die border-color
-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden.
- Wenn ein Wert angegeben wird, gilt dieselbe Farbe für alle vier Seiten.
- Wenn zwei Werte angegeben werden, gilt die erste Farbe für oben und unten, die zweite für links und rechts.
- Wenn drei Werte angegeben werden, gilt die erste Farbe für oben, die zweite für links und rechts, die dritte für unten.
- Wenn vier Werte angegeben werden, gelten die Farben der Reihenfolge nach für oben, rechts, unten und links (im Uhrzeigersinn).
Werte
<color>
-
Definiert die Farbe des Rahmens.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
Beispiele
Vollständige Nutzung von border-color
HTML
<div id="justone">
<p><code>border-color: red;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: red;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: red;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="horzvert">
<p><code>border-color: gold red;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: gold;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="topvertbott">
<p><code>border-color: red cyan gold;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: cyan;</code></li>
</ul>
</div>
<div id="trbl">
<p><code>border-color: red cyan black gold;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: black;</code></li>
<li><code>border-left-color: gold;</code></li>
</ul>
</div>
CSS
#justone {
border-color: red;
}
#horzvert {
border-color: gold red;
}
#topvertbott {
border-color: red cyan gold;
}
#trbl {
border-color: red cyan black gold;
}
/* Set width and style for all divs */
div {
border: solid 0.3em;
width: auto;
margin: 0.5em;
padding: 0.5em;
}
ul {
margin: 0;
list-style: none;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
CSS Backgrounds and Borders Module Level 3 # border-color |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Rahmenfarbenbezogene CSS-Eigenschaften:
border
,border-top-color
,border-right-color
,border-bottom-color
,border-left-color
, - Andere rahmenbezogene CSS-Eigenschaften:
border-width
,border-style
- Der
<color>
Datentyp - Andere farbenbezogene Eigenschaften:
color
,background-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, undcolumn-rule-color
- Anwenden von Farben auf HTML-Elemente mit CSS