Bordes con CSS

La propiedad border nos permite definir de golpe los 4 bordes de los 4 respectivos lados de un elemento <div>, su sintaxis es muy sencilla por ejemplo: border: solid 2px blue; en esta ocasión estaríamos diciendo que deseamos un borde solido (solid) general para los 4 lados con un grosor de 2px y que este borde sea de un color Azul (blue). Si deseamos asignar valores diferentes a los 4 lados de nuestro elemento debemos utilizar la propiedad border-top (asignar un valor al borde de arriba), border-bottom (asignar un valor al borde de abajo), border-left (asignar un valor al borde izquierdo). border-right (asignar un valor al borde derecho). A cada propiedad podemos asignar estilo, grosor y color diferente.

Si deseamos asignar cada uno de estos valores por separado podemos asignarlos de la siguiente manera:

Este valor solid es el estilo que nosotros queremos darle a nuestro borde, tambien podemos colocarlo por separado si lo deseamos con la propiedad border-style, al igual que la propiedad anterior estamos dando un valor de golpe a los 4 lados de nuestro elemento, para esta propiedad podemos encontrar los siguientes valores: 

• none: Sin borde, el grosor de nuestro borde es definido como 0, este valor viene por defecto si nosotros no asignamos un borde.

• hidden : Este valor es igual que 'none', excepto en el caso de conflictos de bordes por ejemplo en elementos de tabla.

• dashed : Con este valor estamos brindando un estilo de borde en guiones (-----).

• dotted : Con este valor estamos brindando un estilo de borde en puntos (.....).

• double : Estilo de borde en dos líneas rectas continuas.

• groove : Brindamos un efecto de hundimiento del borde.

• inset : Brindamos un efecto de hundimiento de una caja.

• outset : Este efecto es inverso a 'inset', la caja parece salir, como en 3D.

• ridge : Este efecto inverso a 'groove', el borde parece salir, como en 3D.

• solid : Línea única, recta, sólida.

Para definir el valor del grosor o ancho de nuestro borde por separado lo daremos con la propiedad border-width, seguido del valor por ejemplo : border-width: 2px, estamos asignando un grosor de 2px. Este valor que estamos asignando es para todos los 4 bordes.

Con la propiedad border-color asignamos un color a nuestros 4 bordes, ejemplo: border-color: red.

Cada una de estas propiedad habladas anteriormente (border-style, border-width y border-color) Es un atajo para asignar de golpe valores a los 4 bordes, cada una de estas propiedades se pueden asignar por separado a cada uno de los lados de nuestro elemento, para ello solo colocamos en medio el borde al cual vamos a asignar este valor ejemplo: border-left-style, border-left-width, border-color.


En el siguiente enlace podrán descargar un ejemplo de esta propiedad.


Descargar