Curso CSS. Capítulo 14: Propiedades border-top, border-right, border-bottom, border-left y border

Para acabar con las propiedades relacionadas con los bordes de las cajas faltaría por estudiar las propiedades border-top, border-right, border-bottom, border-left y border.

Estas cinco propiedades son propiedades de conjunto y funcionan también practicamente igual que las anteriores ya que aceptan los mismos valores o palabras claves.

La propiedad border-top engloba las propiedades border-top-color, border-top-width y border-top-style. Se utiliza para definir el aspecto del borde superior.

La propiedad border-right engloba las propiedades border-righ-color, border-righ-width y border-righ-style. Se utiliza para definir el aspecto del borde derecho.

La propiedad border-bottom engloba las propiedades border-bottom-color, border-bottom-width y border-bottom-style.  Se utiliza para definir el aspecto del borde inferior.

La propiedad border-left engloba las propiedades border-left-color, border-left-width y border-left-style. Se utiliza para definir el aspecto del borde izquierdo.

La propiedad border engloba las propiedades del anterior capítulo, border-width, border-color y border-style. Se utiliza para definir el aspecto de todos los bordes. No se pueden definir más de tres valores por lo que lo definido en esta propiedad se define para todos y cada uno de los bordes de la caja.

Estas cinco propiedades admiten un máximo de tres valores, un valor que defina la anchura del borde afectado, un valor que defina el color del borde afectado y un valor que defina el estilo del borde afectado. Recordar que sino se establece un valor de estilo para el borde se ignoraran automaticamente los valores de anchura y color ya que por defecto el valor del estilo del borde es none y no se muestra.

Cabe destacar que las propiedades que no se establezcan se establecerá el valor por defecto. Así si utilizamos la siguiente regla el color del borde será negro, que es el valor por defecto para la propiedad color del borde afectado.

div{
   border: 1px solid;
}

Así se vería en un navegador que cumple los estándares si la caja fuera de 150px X 150px, es decir la propiedad width y height que veremos más adelante estuvieran establecidas a 150px.

Vamos a ver un ejemplo para entender mejor el funcionamiento de estas propiedades.

div{
   border-top: 1px solid black;
   border-right: 2px dotted red;
   border-bottom: 3px dashed blue;
   border-left: 4px double green;
}

Este ejemplo es el mismo ejemplo utilizado en el capítulo anterior pero con las propiedes de conjunto de cada borde. Así se vería en un navegador que cumple los estándares si la caja fuera de 150px X 150px, es decir la propiedad width y height que veremos más adelante estuvieran establecidas a 150px.

RESUMEN

Ya hemos visto 20 propiedades de CSS utilizadas para modificar los aspectos de cualquier borde de una caja. Contamos con un gran número de propiedades específicas para cada borde o de conjunto que podemos utilizar. Normalmente suelen utilizarse más las propiedades de conjunto.

En el siguiente capítulo entraremos en detalle a ver las diferentes propiedades existentes en CSS para modificar los “rellenos” de los elementos.

Curso CSS. Capítulo 13: Propiedades border-width, border-color y border-style

En los capítulos anteriores hemos visto como modificar la anchura, el color o el estilo de cada borde de la caja de un elemento. Para ello hemos utilizado propiedades individuales para cada borde dependiendo de donde estuviera situado, top, right, bottom o left.

CSS cuenta con tres propiedades de conjunto para modificar directamente la anchura, el color y el estilo de todos los bordes a la vez. Estas propiedades son border-width, border-color y border-style.

Funcionan practicamente igual que las propiedades anteriores ya cada tipo admite los mismos valores o palabras claves estudiadas en los capítulos anteriores, se pueden aplicar a todos los elementos y los elementos hijos no heredan directamente los valores.

Pero tiene una pequeña diferencia. Podemos indicar un mínimo de un valor y un máximo de cuatro valores. Vamos a mostrar un ejemplo para entenderlo en profundidad.

La siguiente regla CSS establece los cuatro bordes de color negro, sólidos y con una anchura de un píxel. Por lo que podemos afirmar que si solo se establece un valor se aplica a los cuatro bordes de la caja.

div{
   border-color: black;
   border-style: solid;
   border-width: 1px;
}

Así se vería en un navegador que cumple los estándares si la caja fuera de 150px X 150px, es decir la propiedad width y height que veremos más adelante estuvieran establecidas a 150px.

La siguiente regla CSS establece los bordes superior e inferior de color negro, sólidos y con una anchura de un píxel, mientras que los bordes derecho e izquierdo se establece de color rojo, punteados y con una anchura de 2 píxeles. Por lo que podemos afirmar que si se establecen dos valores, el primero se aplica a los bordes superior e inferior, y el segundo se aplica a los bordes derecho e izquierdo.

div{
   border-color: black red;
   border-style: solid dotted;
   border-width: 1px 2px;
}

Así se vería en un navegador que cumple los estándares si la caja fuera de 150px X 150px, es decir la propiedad width y height que veremos más adelante estuvieran establecidas a 150px.

La siguiente regla CSS establece el borde superior de color negro, solido y con una anchura de un píxel, los bordes derecho e izquierdo de color rojo, punteados y con una anchura de dos píxeles, mientras que el borde inferior se establece de color azul, rayado y con una anchura de tres píxeles. Por lo que podemos afirmar que el primer valor se aplica al borde superior, el segundo valor se aplica a los bordes laterales y el tercer valor al borde inferior.

div{
   border-color: black red blue;
   border-style: solid dotted dashed;
   border-width: 1px 2px 3px;
}

Así se vería en un navegador que cumple los estándares si la caja fuera de 150px X 150px, es decir la propiedad width y height que veremos más adelante estuvieran establecidas a 150px.

Por último la siguiente regla establece cada borde con un estilo diferente. Por lo que podemos afirmar que si se establecen cuatro valores se aplica un valor a cada borde, empezando por el superior y siguiendo las agujas del reloj, es decir, superior, izquierdo, inferior y derecho.

div{
   border-color: black red blue green;
   border-style: solid dotted dashed double;
   border-width: 1px 2px 3px 4px;
}

Así se vería en un navegador que cumple los estándares si la caja fuera de 150px X 150px, es decir la propiedad width y height que veremos más adelante estuvieran establecidas a 150px.

RESUMEN

Hemos visto las propiedades de conjunto con las que cuenta CSS para atajar y establecer directamente las acnhuras, colores y estilos de los bordes de una caja con una única propiedad. De esta forma nos ahorramos muchas declaraciones. CSS cuenta con otras propiedades de conjunto que veremos más adelante y que prácticamente funcionan igual.

En el siguiente capítulo vamos a terminar con las propiedades dedicadas al diseño de los bordes. Veremos las propiedades de conjunto para modificar los estilos de cada borde por separado.

Curso CSS. Capítulo 12: Propiedades border-top-style, border-right-style, border-bottom-style, border-left-style

En el capítulo anterior vimos como modificar el color  de los bordes de la caja de un elemento. Ahora vamos a estudiar como modificar el estilo de los bordes.

Si has intentado llevar a cabo los ejemplos que utilizamos en los dos anteriores capítulos te habras dado cuenta de que no se mostraban los bordes de colores ni las anchuras de los bordes. Esto es así porque por defecto el navegador no muestra los bordes de las cajas de los elementos y por lo tanto no son visibles, ni en color ni en anchura. Vamos a ver como podemos modificar este comportamiento.

Modificar el estilo de los bordes

Para modificar el estilo de los bordes de una caja podemos utilizar las propiedades siguientes: border-top-style, border-right-style, border-bottom-style, border-left-style que modifican respectivamente el estilo del borde superior, derecho, inferior e izquierdo. Si lo que queremos es establecer un color para un conjunto de bordes podemos utilizar la propiedad de conjunto border-style que veremos más adelante.

Estas propiedades admiten como valor un conjunto de palabras claves:

• none, establece que los bordes no deben existir. Si se especifica anula cualquier modificación del ancho o color del borde.
• hidden, exactamente igual que none.
• dotted, establece un estilo de borde punteado.
• dashed, establece un estilo de borde como una línea discontinua de rayas.
• solid, estable el estilo de borde como una línea continua.
• double, establece el estilo de borde como una doble línea continua separadas por un espacio en blanco. No se aprecia visualmente a menos que la anchura del borde sea superior a 3 píxeles.
• groove, establece un estilo de borde que presenta el aspecto de una arista.
• ridge, como groove pero invirtiendo los colores. Mejor que hagais pruebas y veais vosotros mismos a lo que me refiero.
• inset, establece un estilo de borde que parece hundirse con respecto al plano. Para que me entendais, un estilo similar a cuando apretas un botón.
• ouset, establece un estilo de borde que parece sobresalir con respecto al plano. Lo contrario a inset, es similar al estilo de un botón cuando no está pulsado.

Estas cuatro propiedades que estamos viendo para modificar el estilo del borde tienen un valor por defecto none, por lo que como hemos dicho no se muestra el borde de ninguna caja a no ser que establezcas la propiedad a otro valor distinto. Estas cuatro propiedades se pueden aplicar a todos los elementos y su valor no es heradado automáticamente a los elementos hijos.

Vamos a ver una serie de ejemplos utilizando estas propiedades. Para ello utilizaremos el siguiente marcado:

<div id="prueba">
   <p>Blablablablabla.</p>
</div>

Si aplicamos las siguientes propiedades modificaremos el estilo de cada borde del elemento div que contiene al párrafo.

div#prueba {
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dashed;
   border-left-style: double;
}

Así se vería en un navegador que cumpla con los estándares si además establecemos un ancho de borde de tres píxeles y un tamaño de caja de 150px.

Cabe destacar que en IE6 existe un bug por lo que no se pueden mostrar bordes con estilo dotted si el ancho del borde es de un píxel, ya que lo muestra directamente como dashed. También destacar que cuando establecemos un color de fondo o una imagen de fondo de la caja el color o la imagen estan presentes en una capa inferior al borde, por lo que se mostrará por ejemplo en los espacios que deja el estilo dashed o dotted.

RESUMEN

En este tercer capítulo dedicado a los bordes hemos visto como modificar el estilo de cada borde de la caja de un elemento utilizando cuatro propiedades (border-top-style,border-right-style, border-bottom-style, border-left-style) y hemos dejado caer la existencia de una quinta propiedad de conjunto (border-style) que estudiaremos en el siguiente capítulo en conjunto con border-width y border-color.

Ya sabemos como modificar el estilo de cada borde, en el siguiente capítulo estudiaremos las propiedades de conjuntos para modificar la anchura, el color y el estilo que hemos obviado en los anteriores capítulos.

Curso CSS. Capítulo 11: Propiedades border-top-color, border-right-color, border-bottom-color, border-left-color

En el capítulo anterior vimos como modificar la anchura o el grosor de los bordes de la caja de un elemento. Ahora vamos a estudiar como modificar el color de los bordes.

Modificar el color de los bordes

Para modificar el color de los bordes de una caja podemos utilizar las propiedades siguientes: border-top-color, border-right-color, border-bottom-color, border-left-color que modifican respectivamente el color del borde superior, derecho, inferior e izquierdo. Si lo que queremos es establecer un color para un conjunto de bordes podemos utilizar la propiedad de conjunto border-color que veremos más adelante.

Estas propiedades admiten como valor un color definido de las diferentes formas que vimos anteriormente o un conjunto de palabras claves:

• transparent, establece un color transparente que no se ve pero su grosor sigue afectando a la posición de los elementos adyacentes.
• inherit, el elemento hereda el valor del color del borde del elemento padre para esta propiedad.

Como ya hemos visto en el capítulo anterior, este valor está relacionado con la herencia que veremos más adelante.

Estas cuatro propiedades que estamos viendo para modificar el color del borde tienen un valor por defecto igual al valor de la propiedad color del elemento al que se ha aplicado. La propiedad color también la veremos más adelante y se utiliza para modificar el color de letra. Estas cuatro propiedades se pueden aplicar a todos los elementos y su valor no es heradado automáticamente a los elementos hijos.

Vamos a ver una serie de ejemplos utilizando estas propiedades. Para ello utilizaremos el siguiente marcado:

<div id="prueba">
   <p>Blablablablabla.</p>
</div>

Si aplicamos los siguientes estilos modificaremos el color de cada borde del elemento div que contiene al párarfo.

div#prueba {
   border-top-color: red;
   border-right-color: blue;
   border-bottom-color: #0F0;
   border-left-color: rgb(255,255,0);
}

Así se vería en un navegador que cumpla con los estándares si además establecemos un ancho de borde de tres píxeles y un tamaño de caja de 150px, y un estilo de borde solid.

RESUMEN

En este segundo capítulo dedicado a los bordes hemos visto como modificar el color de cada borde de la caja de un elemento utilizando cuatro propiedades (border-top-color,border-right-color, border-bottom-color, border-left-color) y hemos dejado caer la existencia de una quinta propiedad de conjunto (border-color) que estudiaremos más adelante.

Ya sabemos como modifcar el color de cada borde, en el siguiente capítulo estudiaremos como podemos modificar el estilo de cada borde de la caja de un elemento.

Curso CSS. Capítulo 10: Propiedades border-top-width, border-right-width, border-bottom-width, border-left-width

Practicamente ya hemos estudiado la mayoría de conceptos necesarios para entender en profundidad las propiedades CSS, nos faltaría por ver la herencia y la cascada que estudiaremos cuando acabemos de ver las propiedades.

Introducción a los bordes

Vamos a empezar con un conjunto de propiedades muy fáciles de entender si se ha entendido perfectamente el modelo de cajas. La propiedad border que nos permite definir el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Es una propiedad de conjunto que engloba las propiedades border-color, border-style y border-width, que también son propiedades de conjunto.

Vayamos poco a poco para entenderlo mejor. Sabemos que la caja de un elemento tiene cuatro bordes, el borde de arriba (top), el borde de la derecha (rigth), el borde de abajo (bottom) y el borde de la izquierda (left). Mediante una serie de propiedades podemos modificar la anchura (width), el color (colour) y el estilo (style) de cada uno de esos bordes.

Modificar la anchura de los bordes

Bien, vamos a empezar viendo como podemos definir la anchura del borde de una caja. Para ello podemos utilizar las propiedades siguientes: border-top-width, border-right-width, border-bottom-width, border-left-width que modifican respectivamente el ancho del borde superior, derecho, inferior e izquierdo. Si lo que queremos es definir una anchura para un conjunto de bordes podemos utilizar la propiedad de conjunto border-width que veremos más adelante.

Estas propiedades admiten como valor medidas absolutas, medidas relativas o un conjunto de palabras claves:

• thin, establece un borde fino.
• medium, establece un borde medio.
• thick, establece un borde grueso.
• inherit, el elemento hereda el valor de la anchura del elemento padre.

Este último valor está relacionado con la herencia. Aunque todavía no hayamos hablado de ella se puede entender perfectamente. Imaginar que un elemento div está contenido dentro de un elemento div padre:

<div id="padre">
  <div id="hijo">
  </div>
</div>

Si establecemos la propiedad border-top-width del div con id hijo al valor inherit, heredará la anchura del borde del elemento padre que lo contiene, es decir del elemento div con id padre. Si este elemento tuviera un valor en la misma propiedad de un píxel, el elemento hijo tambien tendría ese mismo valor en la propiedad.

Si no se ha entendido no os preocupéis que más adelante dedicaré un capítulo entero al tema de la herencia.

Por defecto, estas cuatro propiedades que estamos viendo para modificar el ancho del borde tienen un valor medium. Estas propiedades se pueden aplicar a todos los elementos y su valor no es heradado automáticamente a los elementos hijos.

Vamos a ver una serie de ejemplos utilizando estas propiedades. Para ello utilizaremos el siguiente marcado:

<div id="prueba">
   <p>Blablablablabla.</p>
</div>

Si aplicamos los siguientes estilos modificaremos la anchura de cada borde del elemento div encerrando el párrafo en una caja.

div#prueba {
   border-top-width: thin;
   border-right-width: medium;
   border-bottom-width: thick;
   border-left-width: 2px;
}

Así se vería en un navegador que cumpla con los estándares si además establecemos un tamaño de caja de 150px y un estilo de borde solid.

Por último destacar que la media más habitual para definir la anchura suele ser el píxel y no las palabras clave, debido que la anchura definida por cada palabra clave no es estandar y suele cambiar en los diferentes navegadores. Si queremos tener un control preciso y mostrar nuestros diseños exactamente igual en todos los navegadores es conveniente que definamos la anchura de los bordes utilizando la media relativa píxel.

RESUMEN

Para no saturar mucho en cada entrada, voy a separar las propiedades que modifican el aspecto de los bordes de las cajas en varios capítulos. En este primero hemos visto como modificar la anchura de cada borde de la caja de un elemento utilizando cuatro propiedades (border-top-width, border-right-width, border-bottom-width, border-left-width) y hemos dejado caer la existencia de una quinta propiedad de conjunto (border-width) que estudiaremos más adelante.

Ya sabemos como modifcar la anchura de cada borde, en el siguiente capítulo estudiaremos como podemos modificar el color de cada borde de la caja de un elemento.