Základy práce s rámami v CSS

Teraz sa naučíme pridávať rám elementom. To sa robí pomocou troch vlastností: vlastnosť border-width nastavuje hrúbku rámca, border-color - farbu, a border-style nastavuje typ rámca.

Prvé dve vlastnosti fungujú zrejmým spôsobom: border-color prijíma farby v tom istom formáte, ako vlastnosť color, a hrúbka rámca sa nastavuje v pixeloch. A vlastnosť border-style prijíma hodnoty vo forme kľúčových slov. Napríklad, hodnota solid nastavuje plnú čiaru.

Urobme napríklad rámec s hrúbkou 3 pixely, vo forme plnej čiary, červenej farby:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* hrúbka 3px */
  border-style: solid;  /* vo forme čiary */
  border-color: red;    /* červená farba */
  width: 300px;
  height: 100px;
}

Результат:

V nasledujúcich lekciách si rozoberieme prácu s rámcami podrobnejšie.