Grunderna i att arbeta med kanter i CSS

Nu ska vi lära oss att lägga till kant till element. Detta görs med hjälp av tre egenskaper: egenskapen border-width sätter tjockleken på kanten, border-color - färgen, och border-style sätter typen av kant.

De två första egenskaperna fungerar på ett uppenbart sätt: border-color accepterar färger i samma format som egenskapen color, och kanttjockleken anges i pixlar. Men egenskapen border-style accepterar värden i form av nyckelord. Till exempel, värdet solid sätter en heldragen linje.

Låt oss skapa en kant med tjockleken 3 pixlar, i form av en heldragen linje, i röd färg:

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

css#elem {
  border-width: 3px;    /* tjocklek 3px */
  border-style: solid;  /* i form av en linje */
  border-color: red;    /* röd färg */
  width: 300px;
  height: 100px;
}

Результат:

I de följande lektionerna kommer vi att undersöka arbetet med kanter mer ingående.