Propiedades de cuadro

Aplicando bordes a los elementos

Al diseñar con CSS, las líneas o bordes, son utilizadas para resaltar los bloques, cajas, cuadros, con variados efectos visuales que se generan al controlar las caracteristicas de las propiedades CSS del borde.

div {border:1px solid blue;}

• 1px (Ancho de borde)
• solid (Estilo de borde)
• blue (Color de borde)

Ancho de borde

Se puede definir el ancho del borde mediante las siguientes palabras clave:

• thin (delgado)
• medium (mediano)
• thick (grueso)

Estilos de borde

Color de borde

Se puede definir el color del borde mediante Palabras clave:

blue, red, yellow, orange, etc. Con las palabras claves anteriores se puede obtener un número limitado de colores, para generar más variedad de colores emplearemos La especificación numérica RGB Hexadecimal que es la más utilizada en la web:
Especificación numérica RGB Hexadecimal
Ejemplo:

  #0000ff equivale (azul)
  #ff0000 equivale (rojo)
  #ffff00 equivale (amarillo)
  #ff8000 equivale (anaranjado)

Para generar muchos colores, tonalidades y copiar colores de pantalla y convertirlos automaticamente en RGB Hexadecimal, podemos utilizar un pequeño programa gratuito para tal objeto, como Color Cop, Hexagrab, etc. y que son de mucha utilidad en el diseño web.

Ahora que conocemos las formas de aplicar el ancho del borde, los estilos y contamos con un programa para generar colores veamos más ejemplos:

div {border:3px solid #0000FF;}
h2 {border:1px dotted #000000;}
h4 {border:1px groove #800000;}
h1 {border:2px inset #80FF80;}

Estableciendo bordes para cada lado:

Borde superior

Border-top, define el ancho, estilo y color del borde superior.

div {border-top:3px solid #0000FF;}
 

borde derecho

border-right, define el ancho, estilo y color del borde derecho.

div {border-right:1px solid #0000FF;}
 

borde inferior

border-bottom, Es una propiedad abreviada para definir el ancho, estilo y color del borde inferior de un elemento.

div {border-bottom:1px solid #000000;}
 

borde izquierdo

border-left, define el ancho, estilo y color del borde izquierdo.

div {border-left:1px solid #000000;}
 

Borde, superior, derecho, inferior e izquierdo

div {border-top:3px solid #0000FF;border-right:1px solid #0000FF;
     border-bottom:1px solid #000000;border-left:1px solid #000000;}

Aplicando ancho, estilo y color de borde por separado

Ancho de borde

border-width, es una propiedad abreviada para establecer el ancho de los bordes, puede tener entre uno y cuatro valores, interpretándose de la siguiente manera:

• un valor: Establece el valor del ancho de los cuatro bordes.
• dos valores: el primer valor se asigna al ancho de los bordes superior e inferior y el segundo establece el valor de los bordes derecho e izquierdo.
• tres valores: el primer valor corresponde al borde superior, el segundo a los bordes derecho e izquierdo, y el tercero al inferior.
• cuatro valores:se asigna empezando del borde superior, derecho, inferior e izquierdo respectivamente

border-width (un valor):

El valor de 1px se distribuye para los cuatro bordes.

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

border-width (dos valores):

El valor de 1px se distribuye a los bordes superior e inferior y el valor de 3px a los bordes derecho e izquierdo.

div{border-width:1px 3px;border-color:#000000;border-style:solid;}

border-width (tres valores):

El valor de 1px se aplica al borde superior, el valor de 3px se distribye a los bordes derecho e izquierdo y el valor de 5px corresponde al borde inferior. a los bordes derecho e izquierdo.

div{border-width:1px 3px 5px;
    border-color:#000000;border-style:solid;}

border-width (cuatro valores):

El valor de 1px se aplica al borde superior, 3px se aplica al borde derecho, 5px al borde inferior y 8px al izquierdo.

div {border-width:1px 3px 5px 8px;
     border-color:#000000;border-style:solid;}

Color de borde

border-color, es una propiedad abreviada para establecer el color de los bordes, tiene entre uno y cuatro valores, interpretándose de la siguiente manera:

• un valor: Define el color de los cuatro bordes.
• dos valores: el primer valor asigna el color de los bordes superior e inferior y el segundo establece el valor de los bordes derecho e izquierdo.
• tres valores: el primer valor indica el color del borde superior, el segundo de los bordes derecho e izquierdo, y el tercero del inferior.
• cuatro valores:Asigna el valor del color empezando del borde superior, derecho, inferior e izquierdo respectivamente.

border-color (un valor):

El valor de #000000 define el color para los cuatro bordes.

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

border-color (dos valores):

El valor de #000000 define el color para los bordes superior e inferior, y el valor #008000 determina el color del borde derecho e izquierdo.

div {border-width:1px;
     border-color:#000000 #008000;
     border-style:solid;}

border-color (tres valores):

El valor de #000000 define el color para los bordes superior e inferior, y el valor #008000 determina el color del borde derecho e izquierdo.

div {border-width:1px;
     border-color:#000000 #008000 #0000FF;
     border-style:solid;}

border-color (cuatro valores):

El valor de #000000 define el color para el borde superior, el segundo valor #008000 indica el color del borde derecho, el valor #0000FF corresponde al borde inferior, y el valor #FF0000 determina el color del borde izquierdo.

div {border-width:1px;
     border-color:#000000 #008000 #0000FF #FF0000;
     border-style:solid;}