Propiedad "border" en CSS

En CSS, la propiedad border se utiliza para agregar bordes a un elemento HTML. Los bordes son útiles para mejorar la apariencia visual de un elemento, así como para delimitar el contenido y separarlo de otros elementos.

¿Qué es la propiedad "border"?

La propiedad border en CSS permite definir el estilo, grosor y color del borde de un elemento. Se puede especificar el borde para los cuatro lados del elemento (arriba, derecha, abajo, izquierda) o de forma individual.

Ejemplo de Uso

Veamos un ejemplo de cómo se utiliza la propiedad border en CSS:

<div class="caja">
  Esto es una caja con borde.
</div>
  

Y el CSS correspondiente:

.caja {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #333;
}

En este ejemplo, hemos creado una caja con la clase .caja y le hemos aplicado un borde sólido de 2px de grosor y color negro (#333). El borde rodea toda la caja.

Valores de la Propiedad "border"

La propiedad border puede tener varios valores:

• border: 2px solid #333; - Borde sólido de 2px de grosor y color negro.
• border: 1px dashed #f00; - Borde discontinuo de 1px de grosor y color rojo.
• border: 3px dotted #0f0; - Borde punteado de 3px de grosor y color verde.