CSS vlastnost border-color určuje barvu rámečku.
| hodnoty | barva rámečku |
|---|---|
| barva | barva rámečku |
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.
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í).
Všude (pokud vím).
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | ||
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 3, 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | chybně | dá se použít jenom jedna barva pro všechny čtyři strany, jinak je smíchá |
Netscape 4 tyto vlastnosti nezná.
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)
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}
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ě.
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}
Barvy v CSS, Border = rámeček, Border-style = druh rámečku, Border-width = šířka rámečku, Color = barva (zejména) písma
V HTML šly udělat rámečky bez CSS pomocí tabulek.
o tvorbě, údržbě a zlepšování internetových stránek