Podsumowanie

Własność border-color jest skróconą własnością dla ustawienia koloru czterech krawędzi obramowania elementu.

Wartość początkowaas each of the properties of the shorthand:
Stosowana dowszystkich elementów. It also applies to ::first-letter.
Dziedziczonano
Mediavisual
Wartość wyliczonaas each of the properties of the shorthand:
  • border-bottom-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • border-left-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • border-top-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatableas each of the properties of the shorthand:
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Składnia

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

Wartości

<color> 
Kolor może być zdefiniowany jako szesnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.
transparent 
Obramowanie nie jest rysowane, ale zajmuje przestrzeń na stronie.

Można ustawić do czterech wartości.

Jeśli dana jest jedna wartość koloru, wtedy wszystkie cztery krawędzie są tego koloru.
Jeśli dwie wartości - obramowanie górne i dolne używa pierwszej wartości, lewe i prawe używa drugiej.
Jeśli trzy wartości - pierwsza jest dla górnej krawędzi, druga dla lewej i prawej, trzecia dla dolnej.
Jesli cztery wartości - pierwsza dla górnego obramowania, druga dla prawego, trzecia dla dolnego i czwarta dla lewego.

Przykłady

Zobacz przykład

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notatki

W celu zobaczenia obramowania musisz również ustawić border-width na wartość dodatnią oraz border-style na jakąś widoczną.

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-color' in that specification.
Candidate Recommendation The transparent keyword has been removed as it is now a part of the <color> data type.
CSS Level 2 (Revision 1)
The definition of 'border-color' in that specification.
Recommendation The property is now a shorthand property
CSS Level 1
The definition of 'border-color' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) [1] 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.0 1.0 (1.9.2) [1] 7.0 11 1.0

Autorzy i etykiety dokumentu

 Autorzy tej strony: Sebastianz, fscholz, teoli, Yuichiro, Ptak82, Mgjbot, Bedi, Witia
 Ostatnia aktualizacja: Sebastianz,