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:

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

#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.