Noções básicas de trabalho com bordas em CSS

Agora vamos aprender a adicionar borda aos elementos. Isso é feito usando três propriedades: a propriedade border-width define a espessura da borda, border-color - a cor, e border-style define o tipo de borda.

As duas primeiras propriedades funcionam de forma óbvia: border-color aceita cores no mesmo formato que a propriedade color, e a espessura da borda é definida em pixels. Já a propriedade border-style aceita valores na forma de palavras-chave. Por exemplo, o valor solid define uma linha sólida.

Vamos fazer, por exemplo, uma borda com espessura de 3 pixels, em forma de linha sólida, na cor vermelha:

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

css#elem {
  border-width: 3px;    /* espessura 3px */
  border-style: solid;  /* em forma de linha */
  border-color: red;    /* cor vermelha */
  width: 300px;
  height: 100px;
}

Результат:

Nas próximas lições, vamos examinar o trabalho com bordas com mais detalhes.