Template css de Joomla: border

Hemos visto las clases del Css predeterminadas del archivo template css de Joomla, ahora vamos a ver la sintaxis de la instruccion border para poderla aplicar dentro de las clases Css de nuestro archivo template css. La instruccion border define el estilo grafico de los bordes del contenedor, podemos redactarla dandole propiedades individualizadas o podemos agrupar distintas propiedades de Css en una sola instrucción:

#clase Css {
border-<lado>-width: <valor>;
border-<lado>-style: <valor>;
border-<lado>-color: <valor>;
}

La instrucción border nos ofrece la posibilidad de dar tres definiciones al borde: el grosor, el estilo y el color.

El grosor se puede delimitar usando el valor que queramos acompañado de la unidad de medida, o poniendo unos valores predefinidos: thin que nos dará un borde delgado, thick uno grueso y medium que ya os imagináis que espesor de borde nos dará

El estilo en cambio admite más definiciones: none (o  hidden, en ambos casos inexistente), dotted, dashed, solid, double, groove, ridge, inset o outset

Los valores del color se pueden definir asignando un color (#FF0000 o red) o a través de la clave inherit

Veamos un ejemplo modificando por igual los cuatro bordes del contenedor de modulos del template css de la plantilla de Video Tutorial Joomla con las instrucciones
border-width: 1px;
border-style: solid;
border-color: #FF0000;

se convertirá en:


Ahora bien estas tres instrucciones las podemos agrupar en una sola de la siguiente manera:
border: 1px solid #FF0000;
con lo que ahorramos trabajo al servidor y aceleramos la carga de nuestro template css

Hasta ahora he hablado de la instrucción border refiriendose uniformemente a todos los bordes, pero ahora veremos que podemos agrupar cada una de las instrucciones especificando valores distintos para cada borde
border-width: 2px 1px 2px 1px; (el orden definido és top, right, bottom y left)
border-style: solid;
border-color: red blue red blue;
y nos queda:


si en cambio queremos definir solamente uno de los cuatro bordes de una clase de nuestro template css, podemos usar las siguientes instrucciones:
border-top (arriba)
border-right (derecha)
border-bottom (abajo)
border-left (izquierda)

combinadas con el resto podría ser:
border-top: 1px solid #FF0000;

Bueno ya me he puesto bastante borde por hoy