Grundlæggende arbejde med grænser i CSS

Nu skal vi lære at tilføje grænser til elementer. Dette gøres ved hjælp af tre egenskaber: egenskaben border-width indstiller tykkelsen af grænsen, border-color - farven, og border-style indstiller grænsetypen.

De første to egenskaber fungerer på en indlysende måde: border-color accepterer farver i samme format som egenskaben color, og grænsetykkelsen indstilles i pixels. Men egenskaben border-style accepterer værdier i form af nøgleord. For eksempel, værdien solid indstiller en solid linje.

Lad os for eksempel lave en grænse med en tykkelse på 3 pixels, i form af en solid linje, rød farve:

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

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

Результат:

I de næste lektioner vil vi overveje arbejdet med grænser mere detaljeret.