Rámečky

Podívejme se teď na rámečky podrobněji. Jeden už jsme napsali: border: 1px solid red. Vlastnost border (rámeček) má tři hodnoty:

border: šířka styl barva;

• Šířku, obvykle v pixelech, například 2px.
• Styl čáry: solid (plná), dashed (čárkovaná), dotted (tečkovaná) nebo double (dvojitá). Hodnota none znamená žádný rámeček.
• Barvu v jakémkoli formátu, který znáte, například #476958.

Takhle jednotlivé styly vypadají: solid dashed dotted double

Na pořadí hodnot nezáleží, takže funguje i border: solid 2px #476958. Šířku nebo barvu dokonce můžete vynechat a prohlížeč použije výchozí. Nezapomeňte ale na styl: jeho výchozí hodnota je none, takže border: 2px red nezobrazí rámeček vůbec.

Pro rámeček jen na jedné straně slouží vlastnosti border-top (nahoře), border-right (vpravo), border-bottom (dole) a border-left (vlevo) se stejnými třemi hodnotami. Například border-bottom: 1px solid gray nakreslí pod prvkem čáru.

Červené rámečky nám ukázaly boxy prvků. Teď je nahradíme hezčími: ze dvou skupin textu a ze seznamu plemen uděláme karty s bílým pozadím a zeleným rámečkem.