CSS:n rajojen perusteet

Nyt opimme lisäämään rajan elementteihin. Tämä tehdään kolmella ominaisuudella: ominaisuus border-width asettaa rajan paksuuden, border-color - värin, ja border-style asettaa rajan tyylin.

Kaksi ensimmäistä ominaisuutta toimivat ilmeisellä tavalla: border-color hyväksyy värit samassa muodossa kuin ominaisuus color, ja rajan paksuus asetetaan pikseleinä. Mutta ominaisuus border-style hyväksyy arvot avainsanoina. Esimerkiksi, arvo solid asettaa yhtenäisen viivan.

Tehdään esimerkiksi 3 pikselin paksuinen raja, yhtenäisenä viivana, punaisella värillä:

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

css#elem {
  border-width: 3px;    /* paksuus 3px */
  border-style: solid;  /* yhtenäisenä viivana */
  border-color: red;    /* punainen väri */
  width: 300px;
  height: 100px;
}

Результат:

Seuraavissa oppitunneissa tarkastelemme rajojen käsittelyä tarkemmin.