Bazele lucrului cu borduri în CSS

Acum vom învăța să adăugăm bordură elementelor. Acest lucru se face cu ajutorul a trei proprietăți: proprietatea border-width setează grosimea bordurii, border-color - culoarea, iar border-style setează tipul bordurii.

Primele două proprietăți funcționează în mod evident: border-color acceptă culori în același format ca și proprietatea color, iar grosimea bordurii este setată în pixeli. Însă proprietatea border-style acceptă valori sub formă de cuvinte cheie. De exemplu, valoarea solid setează o linie continuă.

Să facem, de exemplu, o bordură cu grosimea de 3 pixeli, sub formă de linie continuă, de culoare roșie:

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

css#elem {
  border-width: 3px;    /* grosime 3px */
  border-style: solid;  /* sub formă de linie */
  border-color: red;    /* culoare roșie */
  width: 300px;
  height: 100px;
}

Результат:

În lecțiile următoare vom analiza lucrul cu bordurile mai detaliat.