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 nebo při nastavení box-model: border-box se tloušťka rámečků 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; }
Pozadí pod rámečkem a obrázkový rámeček
Když chcete pod tečkovaným nebo jinak průhledným rámečkem vykreslovat obrázkové pozadí prvku, použijte vlastnost background-clip: border-box. Na barvu pozadí nic nastavovat nemusíte, ta se pod border vykresluje (kdyby byla vidět). Pokud chcete naopak celý rámeček udělat z obrázku, můžete použít vlastnost border-image (zatím nemám popsanou). Na použití border-image musíte mít obrázek chytře upravený. Jestli nechcete obrázek na rámeček speciálně připravovat, můžete prostě jenom použít více pozadí a vlastností border-clip určit, kde se které bude zobrazovat. Ve všech podobných případech se vyplatí nastavit průhlednou barvu rámečku - border-color: transparent.
Na testování se lépe hodí vlastnost outline
Když si občas chci při ladění rozvržení stránky zobrazit okraje bloků (typicky tagů div), hodí se orámovat si je. Dlouho jsem k tomu používal zápis
div {border: 1px dotted orange;}
což vykreslí kolem všech divů jednopixelový oranžový tečkovaný rámeček. Někdy ale může být při ladění problém i v tom jednom pixelu, o který se divy zvětší, takže raději používám vlastnost outline (obtažení nebo vnější rámeček), protože ta se nijak a nikdy nepočítá do rozměrů a vykreslí se vždy vně:
div {outline: 1px dotted orange;}
Jinak se vlastnost outline chová velmi podobně vlastnosti border.
Podpora
V dnešních prohlížečích (2018) je podpora velmi dobrá a už dlouho s vlastností border nejsou žádné problémy.
| Prohlížeč | Podpora |
|---|---|
| Firefox | ano |
| Opera | ano |
| Safari | ano |
| Chrome | ano |
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.
Průhledný rámeček
Nic jako border-opacity neexistuje (aspoň ne v roce 2021), ale rámeček se může nechat vykreslit poloprůhlednou barvou:
div {border: 16px dotted rgba(0,64,255,0.5); }
Používám to například v příkladu na background-clip.
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)
Staré příklady vlastnosti border.
Další příklady u jednotlivých vlastností border-*.
Napsáno 2003, poslední aktualizace 26. 2. 2021
Reklama
