CSS-i piiride põhitöö

Nüüd õpime elementidele piiri lisama. Seda tehakse kolme omaduse abil: omadus border-width määrab piiri paksuse, border-color - värvi, ja border-style määrab piiri tüübi.

Esimesed kaks omadust toimivad ilmselgelt: border-color võtab vastu värve samas formaadis nagu omadus color, ja piiri paksus määratakse pikslites. Kuid omadus border-style võtab vastu väärtused võtmesõnade kujul. Näiteks väärtus solid määrab pideva joone.

Teeme näiteks 3 pikslise paksusega piiri, pideva joonena, punase värvi:

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

css#elem {
  border-width: 3px;    /* paksus 3px */
  border-style: solid;  /* joonena */
  border-color: red;    /* punane värv */
  width: 300px;
  height: 100px;
}

Результат:

Järgmistes õppetükides vaatleme piiridega töötamist detailsemalt.