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.
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; }
V dnešních prohlížečích (2003) je podpora velmi dobrá, u starších prohlížečů to někdy bylo trochu komplikované.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
5.5, 6 | řádkové i blokové prvky, ale počítá border do šířky a výšky | |
IE 4, IE 5.0 | 4, 5 | nevykreslí rámeček kolem řádkových prvků (nutno nastavit rozměr) |
Mozilla (Netscape 6+) | všechny verze | bere hodnotu hidden pro buňky tabulky a nevykreslí pak příčky |
Opera | 4, 5, 6, 7 | |
Konqueror | ano | |
IE 5 / Mac | ano | |
Netscape Navigator 4 | s mnoha chybami | je to prakticky zoufalé, podrobnosti už jsem raději zapomněl |
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.
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á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.
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)
Staré příklady vlastnosti border.
Další příklady u jednotlivých vlastností border-*.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.