Border-color – css vlastnost pro barvu rámečku

Vlastnost určující barvu, jakou se zobrazí rámeček kolem nějakého HTML prvku. Dále se naučíte, jak jej správně zapsat, abyste dosáhli svého cíle.

Způsob zápisu

Ukázka zápisu červeného rámečku vytvořeného z jednolité čáry o šířce 1px:

selektor {
   border-color: red;
   border-style: solid;
   border-width: 1px;
}

Důležitá poznámka: pokud chcete, aby se rámeček zobrazil, musíte definovat krom BORDER-COLOR i další dvě vlastnosti, a sice BORDER-STYLE a BORDER-WIDTH. Můžete provést i jednotný zápis viz zde.

Hodnoty používané u BORDER-COLOR

1. #FF0000 – hexadecimálním zápisem

   Jedná se o zápis v šestnáctkové soustavě, který v CSS poznáte tím, že začíná mřížkou # a pokračuje obvykle šesti znaky. Vždy dva znaky znamenají jednu ze tří barev, tedy červená (red), zelená (gren), modrá (blue). Zápis červené barvy tedy vypadá takto #FF0000. Značky FF v hexadecimální soustavě znamenají hodnostu 255 v desítkové soustavě na kterou jsme zvyklí. Hodnota FF (respektive 255) je maximální hodnota, tedy zápis #FF0000, znamená, že červená je plná a ostatní barvy použity nebudou vůbec.
   Kdy se tento způsob používá
   Velice často, protože jej používají grafické programy a lze tak barvu přenést přesně. Je podporován všemi dnes používanými internetovými prohlížeči.

2. rgba(255, 0, 0, 0.5) – GRBa zápisem

   V principu totéž, co hexadecimální způsob, tedy opět tři barvy (červená, zelená, modrá), jen číselné hodnoty se píší v desítkové soustavě. Hodnota 0 je žádná přítomnost, hodnota 255 je plná přítomnost barvy. Tento zápis je sice o trošku složitější, ale má jednu značnou výhodu. Můžete poslední hodnotou v zápisu uvést průhlednost (ale nemusíte). Průhlednost se uvádí od 0 do 1. Tedy 0.5 je poloviční průhlednost. Pozor! Používejte desetinou tečku, nikoli čárku jak je v Česku zvykem.

3. red – názvem barvy

   Je možné použít i přesně definovaný název barvy, jako např. black, white, gray, silver, yellou, blue, red, green, purple, teal... 

Kam dál

Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla