Border-color
CSS vlastnost border-color určuje barvu rámečku.
| hodnoty | barva rámečku |
|---|---|
| barva | barva rámečku |
| transparent | průhledný rámeček, nefunguje v Exploreru (kreslí se černý, resp. barva písma) |
| inherit | zděděná barva rámečku, nefugnuje v Exploreru (rámeček se zpravidla vůbec nevykreslí). V Mozille se kreslí průhledně. |
Rámeček se vykreslí zadanou barvou. Pokud se barva rámečku nezadá, je výchozí hodnotou (nezadávanou) barva písma prvku (takže většinou černá). Prohlížeče se liší v tom, co považují za barvu textu u odkazu (Mozilla modrou [resp. barvu odkazu], Explorer chybně černou).
Barva rámečků různých stran se dá zadat pomocí vlastností border-strana-color, nebo všechny najednou vlastností border-coloor.
Plastické rámečky
Když se zadá plastický rámeček (border-style s hodnotami groove, ridge, inset nebo outset), rámeček bude dvou (a více) barevný. Border-color je pouze jednou z barev, postupně přechází do šedé. V Internet Exploreru přechází do hodně tmavých a světlých barev (skoro do černé a bílé), v Mozille a v Opeře je jemnější přechod do velmi světle šedé barvy (možná až do bílé). Kvůli těmto rozdílům se prakticky nedá vytvořit naprosto přesný barevný design pomocí rámečků (což většinou nevadí).
Podpora
Všude (pokud vím).
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | 4, 5, 5.5, 6 | Plastické rámečky míchá skoro s černou. Nepodporuje hodnotu transparent. |
| Firefox | všechny verze | |
| Opera | všechny verze | |
| Chrome | ano |
Varianty vlastnosti
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
Dvě barvy jednoho rámečku
Internet Explorer umí html pomocí HTML atributů bordercolordark a bordercolorlight (společně s bordercolor) vykreslit různé odstíny různých částí rámečku tabulky. To v CSS neumím udělat (a myslím, že to asi nejde).
Mozilla umí od verze 1.2 vlastnosti -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors a -moz-border-left-colors, ale nevím přesně, co dělají (příklad: CSS styly fungující pouze v Mozille)
Příklady
Vlastnost border-color se často používá v kombinaci s jinými vlasntostmi border-*. Budu chtít mít všechny obrázky (<img>) orámované plnou čarou o síle 5px tmavě modrou barvou (navy):
img {border-style: solid; border-width: 5px; border-color: navy}
Jednodušeji by se to zapsalo vlastností border:
img {border: 5px solid navy}
Přeplácnutí zděděné barvy
Kdybych měl na stránce jiný typ obrázků, které budu chtít orámovat zeleně (green), vytvořím pro ně třídu .zelene. Můžu jim opět zapsat styl rámečku, šířku rámečku i barvu rámečku, ale vše kromě barvy se může zdědit:
img {border: 5px solid navy}
img.zelene {border-color: green}
Výsledkem bude, že obrázek s class="zelene" bude orámován stejně jako ostatní obrázky, akorát zeleně.
Jedna strana jinou barvou
Kdybych chtěl mít obrázky orámované tmavě modrou (navy), ale spodní rámeček světle modrou (blue), dá se to zase zapsat různými způsoby. Jeden způsob je využití speciální vlastnosti border-bottom-color:
img {border: 5px solid navy; border-bottom-color: blue}
Jiný způsob vychází z možnosti zadat všechny strany jinou barvou. Počítá se to shora po směru hodinových ručiček:
img {border-width: 5px ; border-style: solid; border-color: navy navy blue navy}
Příklad postupného zadávání barev
Příklad zápisu stran border-color
Reklama
