Cajas en CSS: Bordes

Para el lenguaje CSS, todo se encuentra contenido en una caja. Es algo que puedes notar claramente cuando dibujas una tabla. Con esto en mente, el siguiente paso es administrar estas cajas conforme lo necesites. Para hacerlo, los primeros elementos a estudiar son los bordes:

Opciones de borde en CSS

Ya que toda caja tiene su borde, con CSS tú eres capaz de manejar qué tan anchas serán, qué estilo tendrán y de qué color serán. Así, tenemos que las tres instrucciones básicas para bordes son:

border-width
border-style
border-color

border-width acepta thin, medium o thick (delgado, medio y grueso) como valores, o una medida específica. border-style especifica si el borde tendrá una imagen none (ninguna), hidden (escondida), dotted (punteada), dashed (guionada), solid (sólida), double (doble), groove, ridge, inset o outset (pruébalas para saber qué efecto le dan al borde). Por último, border-color especifica el color sea por nombre, rgb o valor hexadecimal.

Para especificar las características de un borde específico de una caja, solo se necesita agregar las palabras top (superior), right (derecho), bottom (inferior) o left (izquierdo). Agregando estas palabras a la instrucción, podemos especificar las propiedades CSS aún más:

border-width-top
border-style-top
border-color-top
border-width-right
border-style-right
border-color-right
border-width-bottom
border-style-bottom
border-color-bottom
border-width-left
border-style-left
border-color-left

Usa estas instrucciones con las mismas opciones que viste arriba.

Ejemplos

Si, por ejemplo, se desea dar un pequeño margen color marrón claro a cada fotografía que se tenga en la página, se puede hacer de la siguiente manera:

img {
border-width-top: 2px;
border-style-top: solid;
border-color-top: #ebdea4;
border-width-right: 2px;
border-style-right: solid;
border-color-right: #ebdea4;
border-width-bottom: 2px;
border-style-bottom: solid;
border-color-bottom: #ebdea4;
border-width-left: 2px;
border-style-left: solid;
border-color-left: #ebdea4;
}

Se ve largo, ¿verdad? Descuida, que las contracciones nos ayudarán con esto. solo por si acaso, recuerda colocar un punto y coma en cada instrucción CSS porque si no, no funcionará correctamente.

Contracciones

Bien, presta atención porque esto es muy importante: En el lenguaje CSS, las instrucciones funcionan en el sentido de las agujas del reloj, comenzando desde arriba. Así, si desea evitar escribir todo lo que yo he escrito arriba, basta con que mecanografíe esto:

img {
border: 2px solid #ebdea4;
}

Se puede hacer así de simple porque los cuatro bordes tienen el mismo ancho, estilo y color deseado. Si alguna vez se necesita especificar más, entonces necesitarás utilizar las siguientes instrucciones:

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

Simplemente, no olvides que en ambos casos es necesario especificar los datos en el mismo orden: anchura, estilo y color.


Conocimiento + Computadores