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.
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ů |
| Mozilla (Netscape 6+) | všechny verze | |
| 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 |
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-*.
Border-width = šířka rámečku, Border-style = druh rámečku, Border-color = barva rámečku, Zápis všech stran najednou
o tvorbě, údržbě a zlepšování internetových stránek