Basis van het werken met randen in CSS

Nu gaan we leren hoe we een rand aan elementen kunnen toevoegen. Dit wordt gedaan met behulp van drie eigenschappen: de eigenschap border-width stelt de dikte van de rand in, border-color - de kleur, en border-style stelt het type rand in.

De eerste twee eigenschappen werken op een voor de hand liggende manier: border-color accepteert kleuren in het zelfde formaat als de eigenschap color, en de randdikte wordt ingesteld in pixels. Maar de eigenschap border-style accepteert waarden in de vorm van sleutelwoorden. Bijvoorbeeld, de waarde solid stelt een ononderbroken lijn in.

Laten we bijvoorbeeld een rand maken met een dikte van 3 pixels, in de vorm van een ononderbroken lijn, in de kleur rood:

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

css#elem {
  border-width: 3px;    /* dikte 3px */
  border-style: solid;  /* in de vorm van een lijn */
  border-color: red;    /* rode kleur */
  width: 300px;
  height: 100px;
}

Результат:

In de volgende lessen zullen we het werken met randen meer in detail bekijken.