Border-color

CSS vlastnost border-color určuje barvu rámečku.

border-color
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).

Podpora border-color
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

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.