Grunnleggende om rammer i CSS

Nå skal vi lære å legge til ramme elementer. Dette gjøres ved hjelp av tre egenskaper: egenskapen border-width setter tykkelsen på rammen, border-color - fargen, og border-style setter rammetypen.

De to første egenskapene fungerer på en åpenbar måte: border-color aksepterer farger i samme format som egenskapen color, og rammetykkelsen settes i piksler. Men egenskapen border-style aksepterer verdier i form av nøkkelord. For eksempel, verdien solid setter en heltrukken linje.

La oss for eksempel lage en ramme med en tykkelse på 3 piksler, i form av en heltrukken linje, i rød farge:

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

css#elem {
  border-width: 3px;    /* tykkelse 3px */
  border-style: solid;  /* i form av linje */
  border-color: red;    /* rød farge */
  width: 300px;
  height: 100px;
}

Результат:

I de neste leksjonene skal vi se på arbeid med rammer mer detaljert.