Border

CSS vlastnost border určuje všechny vlastnosti rámečku najednou.

Jsou to vlastnosti Border-width, Border-style a Border-color (v tomto pořadí).

Taktéž určuje naráz vlastnosti všech čtyř stran rámečku. Na nastavení každé strany jinak se musí použít konkrétnějších vlastností border-*.

Výchozí rámeček (myslím) každého objektu je none = žádný rámeček.

V quirk módu se tloušťka rámečků chybně započítává do šířky a výšky prvku.

Opera a Mozilla akceptují i hodnotu hidden pro jednotlivé strany, což způsobí nevykreslení jedné příčky kolapsnutého rámečku v tabulce.

Příklad ekvivalentního zápisu vlastností

Následující tři zápisy vedou ke stejnému efektu:

div {border: 1px solid blue }

div {border-width: 1px; border-style: solid; border-color: blue }

div {border-top: 1px solid blue; border-left: 1px solid blue; border-bottom: 1px solid blue; border-right: 1px solid blue; }

Podpora

V dnešních prohlížečích (2003) je podpora velmi dobrá, u starších prohlížečů to někdy bylo trochu komplikované.

Podpora border
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 5.5, 6 řádkové i blokové prvky, ale počítá border do šířky a výšky
Firefox všechny verze bere hodnotu hidden pro buňky tabulky a nevykreslí pak příčky
Opera 4, 5, 6, 7
Chrome ano  

Aby border fungoval u řádkových prvků (např. odkazů) v Internet Exploreru 5.0, musí se jim nastavit výška nebo šířka. Občas to pak ale blbne, asi to záleží na hodnotě vlastnosti display.

Příklady

Docela často si při ladění designu nechávám zobrazovat čárkované okraje objektů. Rámečky buněk tabulek oranžově, tagy div šedě:

div {border: 1px dashed gray}
td {border: 1px dashed orange}

Pokud se neuvede třetí hodnota (pro barvu), vezme se výchozí barva písma: následující zápis orámuje všechny odstavce <p> černou barvou (pokud budou černým písmem).

p {border: 1px solid}

Můj oblíbený rámeček

Mám ve zvyku (skoro na všech svých stránkách) dávat nad nadpis druhé úrovně slabý rámeček. Hezky se tak opticky oddělí následující text od předchozího. Zápis stylu vypadá takto:

h2 {border-top: 1px solid navy; padding-top: .3em}

je dobré přidat prvku padding (vnitřní okraj), protože se potom rámeček nelepí na text. Zobrazit tento příklad s nadpisy.

Další příklady

Příklad padding a border použitý na odkaz testovaný v Internet Exploreru 5.0 ukáže, že border nelze aplikovat na řádkové prvky (v tomto případě odkaz)

Textové odkazy jako tlačítko.

Staré příklady vlastnosti border.

Další příklady u jednotlivých vlastností border-*.

Napsáno 2003, aktualizace 20. 2. 2016

 

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.