CSS - Modelo de Cajas II

Bordes

La propiedad border se utiliza para dibujar una linea al rededor de una caja y su correspondiente padding (si existiera).

Funciona de manera similar a "background" en el sentido que pueden especificarse propiedades específicas o utilizar un atajo para definirlas todas a la vez.

para definir un borde utilizamos las siguientes propiedades:

border-style
border-width
border-color

border-style

Esta propiedad es la más importante, pues si ésta no existe el borde no se mostrará.

El estilo de borde puede aplicarse a cada lado independientemente o a todos juntos a través de las siguientes sintáxis:

border-top-style
border-right-style
border-bottom-style
border-left-style
border-style

Importante

Si no se incluye un color, por defecto el navegador creará una linea de negra.

Valores

La propiedad border-style puede tomar los siguientes valores.


					
						div {border-style: none};
						div {border-style: dotted};
						div {border-style: dashed};
						div {border-style: solid};
						div {border-style: double};
						div {border-style: groove};
						div {border-style: ridge};
						div {border-style: inset};
						div {border-style: outset};

Ejemplos


					none
					dotted
					dashed
					solid
					double
					groove
					ridge
					inset
					outset

Importante

Puedes definir estilos individuales para cada lado de manera similar a como lo hicimos con la propiedad padding. Es decir, primero arriba, derecha, abajo e izquierda (recuerda separar cada uno con un espacio).


					div {border-style: dotted solid dashed ridge}

border-width

El border-width nos permite especificar el grosor de la linea. Tal como en el border-style podemos definir todos los lados de una vez o cada uno individualmente.

La propiedad puede tomar los siguientes valores:


					
						Unidad de medida: En pixeles.
						Keyword: Puede ser thin, medium o thick

Ejemplo


					div {border-width: 5px;}
					div {border-width: medium}
					div {border-width: 10px thin medium thick;} (Un valor distinto a cada lado)

border-color

Añadir color es tan simple como asignar a la propiedad border-color un valor hexadecimal.

Podemos aplicar distintos colores a cada lado o un color para todos.

Ejemplo


					div {border-color: #00ff00;}
					div {border-color: #00ff00 red;} arriba y abajo verde y a los lados rojo.
					div {border-left-color: #00ff00;} sólo el borde izquierdo verde.

Abreviación

Podemos utilizar una forma abreviada para definir el borde o bordes de una caja.

Importante

Podemos aplicar los tres valores que definen el borde en cualquier orden:


					p {border: border-style border-width border-color}

Ejemplo


					div {border-left: solid 10px red;} Borde izquierdo solamente
					div {border-bottom: solid black 2px;} Solo abajo.
					div {border: red groove 5px} Los cuatro bordes iguales.