Bordes CSS

Las Propiedades de Bordes

Las propiedades de bordes CSS nos permiten especificar el estilo, en ancho y el color de los bordes de un elemento HTML.

Estilos de Bordes CSS

La propiedad border-style especifica el tipo de borde a mostrar.

Los siguientes valores son permitidos:

• dotted - define un borde con puntos.
• dashed - define un borde con rayas.
• solid - define un borde solido.
• double - define un borde doble.
• groove - define un borde surcado 3D. El efecto depende del valor de border-color.
• ridge - define un borde crestado 3D. El efecto depende del valor de border-color.
• inset - define un borde recuadro 3D interno. El efecto depende del valor de border-color.
• outset - define un borde recuadro 3D interno. El efecto depende del valor de border-color.
• none - define que no debe tener borde.
• hidden - define que el borde esta oculto.

Ejemplos:

p.puntos {border-style: dotted;}
p.lineas {border-style: dashed;}
p.solido {border-style: solid;}
p.doble {border-style: double;}
p.surcado {border-style: groove;}
p.crestado {border-style: ridge;}
p.enmarcadoInterno {border-style: inset;}
p.enmarcadoExterno {border-style: outset;}
p.ninguno {border-style: none;}
p.oculto {border-style: hidden;}
p.mezclado {border-style: dotted dashed solid double;}

Ancho del Borde

La propiedad border-width especifica el ancho de los cuatro bordes. El ancho puede ser establecido como un tamaño específico (en px, pt, cm, em, etc.) o usando uno de los tres valores predefinidos: thin, medium o thick.

La propiedad border-width puede tener de uno a cuatro valores (por el borde superior, borde derecho, borde inferior, y el borde de la izquierda).

p.uno {
    border-style: solid;
    border-width: 5px;
}
p.dos {
    border-style: solid;
    border-width: medium;
}
p.tres {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
} 

Colores del Borde

La propiedad border-color es usada para establecer los colores de los cuatro bordes.

El color puedes ser establecido por:

• Nombre - se especifica un nombre de color, como "red".
• RGB - se especifica un valor RGB, como "rgb(255,0,0)".
• Hexadecimal - se especifica un valor hexadecimal, como "#ff0000".
• Transparente - se especifica con el valor "transparent".

La propiedad border-color puede tener de uno a cuatro valores (por el borde superior, borde derecho, borde inferior, y el borde de la izquierda). Si la propiedad border-color no se establece, hereda el color del elemento.

p.uno {
  border-style: solid;
  border-color: red;
}
p.dos {
  border-style: solid;
  border-color: green;
}
p.tres {
  border-style: solid;
  border-color: red green blue yellow;
}

Bordes - Lados individuales

En los ejemplos anteriores vimos que es especificar diferentes bordes para cada lado. En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecha, inferior e izquierda):

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Este ejemplo da el mismo resultado que el siguiente:

p {
  border-style: dotted solid;
}

Aquí como funciona:

Si la propiedad border-style tiene cuatro valores:

• border-style: dotted solid double dashed;
  • El borde superior es "dotted".
  • El borde derecho es "solid".
  • El borde inferior es "double".
  • El borde izquierdo es "dashed".

Si la propiedad border-style tiene tres valores:

• border-style: dotted solid double;
  • El borde superior es "dotted".
  • El borde derecho e izquierdo son "solid".
  • El borde inferior es "double".

Si la propiedad border-style tiene dos valores:

• border-style: dotted solid;
  • El borde superior e inferior son "dotted".
  • El borde derecho e izquierdo son "solid".

Si la propiedad border-style tiene un solo valor:

• border-style: dotted;
  • Los cuatro bordes son "dotted".

El comportamiento e uso de la propiedad border-style usada en el ejemplo anterior, también funciona para border-width y border-color.

Bordes - Propiedad en forma resumida.

Como se puede ver en el ejemplo anterior podemos ver que hay muchas propiedades a tomar en cuenta cuando se tratar de los bordes.

Para acortar el código, también es posible especificar todas las propiedades individuales de los bordes en una sola propiedad. La propiedad border es una propiedad resumida para las siguientes propiedades individuales para bordes:

• border-width
• border-style (requerida)
• border-color

p {
  border: 5px solid red;
}