Rámečky a ohraničení

Ohraničení elementů tvoří dost často velkou část designu. Pomocí ohraničení se vytváří různé svislé i vodorovné čáry, rámečky pro obrázky a podobně.

Možnosti ohraničení

Způsob ohraničení elementů určuje vlastnost border – pro ohraničení elementu „ze všech stran” a vlastnosti border-top, border-right, border-bottom a border-left pro ohraničení zeshora, zprava, zdola a zleva. Tyto vlastnosti mají tři hodnoty:

tloušťka ohraničení

např. 1px

styl ohraničení

• solid – jednoduchá čára
• double – dvojitá čára
• dotted – tečkovaná čára

barva ohraničení

např. black (více viz. Barvy v CSS)

border-top:2px solid green;

Bez ohraničení

Hodnotou vlastnosti border může být také none. Element tedy nebude mít žádné ohraničení (což je standardní nastavení). Tuto vlastnost využijeme například pokud máme obrázkový odkaz, kdyz se kolem obrázku vytvoří zpravidla modrý rámeček.

a img {border:none}

Samostatný zápis

Jednotlivé hodnoty vlastnosti border můžeme zapisovat také zvlášť pomocí vlastností border-width (tloušťka ohraničení), border-style (styl ohraničení) a border-color (barva ohraničení). Takto rozepsaný zápis bude totožný se zápisem prvním.

border-width:2px;
border-style:solid;
border-color:green;

Obvykle je jednodušší první zápis všech hodnot najednou. Rozepsání po jednotlivých vlastnostech je vhodné např. v případě, že chceme třeba všechny nadpisy ohraničit tenkou čárou, ale každý jinou barvou. Pak definujeme tloušťku a styl ohraničení pro všechny nadpisy najednou a barvu definujeme zvlášť pro každou úroveň nadpisu.