Descripción
La propiedad border en CSS se utiliza para establecer el ancho, el estilo y el color de los bordes de un elemento. Esta propiedad abreviada se puede utilizar para establecer las tres propiedades a la vez.
Sintaxis
border : <line-width> || <line-style> || <color>
Valores
- line-style, este término se refiere al diseño o patrón específico utilizado en la creación de la línea. Puede ser:
none, lo cual especifica que no hay borde. Este valor es útil cuando se quiere asegurar que un elemento no tenga ningún borde, sin importar los estilos que se puedan aplicar a sus elementos parent.hidden, que define un borde oculto. A diferencia denone,hiddenpuede utilizarse para ocultar bordes de tablas en ciertas situaciones.dotted, que delinea un borde con una serie de puntos redondos. Este estilo puede ser útil para dar un aspecto distintivo a los elementos, especialmente en diseños minimalistas.dashed, que enmarca el borde como una línea discontinua. Este estilo puede ser útil para indicar áreas que se pueden recortar o para separar visualmente diferentes secciones de una página.solid, que crea una línea de borde sólida y continua. Este es el estilo de borde más comúnmente utilizado, ya que ofrece una separación clara y definida entre diferentes elementos.double, que forma un borde compuesto por dos líneas sólidas. Este estilo puede ser útil para dar un mayor énfasis a ciertos elementos, ya que crea una apariencia más gruesa y prominente.groove, que crea un borde en relieve 3D. Este estilo puede dar la impresión de que el borde está grabado en la página, lo que puede ser útil para crear una sensación de profundidad.ridge, que delinea un borde en relieve 3D. A diferencia degroove, este estilo puede dar la impresión de que el borde sobresale de la página, lo que puede ser útil para crear una sensación de tridimensionalidad.inset, que genera un borde hundido 3D. Este estilo puede dar la impresión de que el elemento está incrustado en la página, lo que puede ser útil para crear una sensación de interioridad o profundidad.outset, que forma un borde saliente 3D. Este estilo puede dar la impresión de que el elemento sobresale de la página, lo que puede ser útil para crear una sensación de exterioridad o prominencia.
- color, se refiere al tono o sombra de la línea que se está utilizando. En CSS, el color se puede definir usando nombres de color predefinidos, códigos de color Hex, valores RGB, valores RGBA, valores HSL o valores HSLA. El uso del color es una herramienta poderosa en el diseño, ya que puede establecer un estado de ánimo, llamar la atención o hacer una declaración. También puede ayudar a definir y diferenciar elementos en un diseño.
- line-width, define el grosor de la línea. Se puede establecer utilizando valores fijos como píxeles, puntos o valores ajustables como porcentajes y ems. El grosor de una línea puede alterar la percepción de las dimensiones del diseño y se puede utilizar para crear énfasis o contraste dentro del diseño.
Ejemplo
div {
border: 3px solid blue;
}
En este ejemplo, se establece un borde sólido de 3 píxeles de ancho y de color azul para todos los elementos div.
