Fundamentos de los bordes en CSS

Ahora aprenderemos a agregar bordes a los elementos. Esto se hace mediante tres propiedades: la propiedad border-width establece el grosor del borde, border-color - el color, y border-style establece el tipo de borde.

Las dos primeras propiedades funcionan de manera obvia: border-color acepta colores en el mismo formato que la propiedad color, y el grosor del borde se establece en píxeles. Pero la propiedad border-style acepta valores en forma de palabras clave. Por ejemplo, el valor solid establece una línea sólida.

Hagamos, por ejemplo, un borde de 3 píxeles de grosor, en forma de línea sólida, de color rojo:

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

css#elem {
  border-width: 3px;    /* grosor 3px */
  border-style: solid;  /* en forma de línea */
  border-color: red;    /* color rojo */
  width: 300px;
  height: 100px;
}

Результат:

En las próximas lecciones, consideraremos el trabajo con bordes de manera más detallada.