CSS - Bordes

Las propiedades del borde le permiten especificar cómo debe verse el borde del cuadro que representa un elemento. Hay tres propiedades de un borde que puede cambiar:

los border-color especifica el color de un borde.
los border-style especifica si un borde debe ser sólido, discontinuo, doble o uno de los otros valores posibles.
los border-width especifica el ancho de un borde.

Ahora, veremos cómo usar estas propiedades con ejemplos.

La propiedad del color del borde

La propiedad border-color le permite cambiar el color del borde que rodea un elemento. Puede cambiar individualmente el color de los lados inferior, izquierdo, superior y derecho del borde de un elemento utilizando las propiedades:

border-bottom-color cambia el color del borde inferior.
border-top-color cambia el color del borde superior.
border-left-color cambia el color del borde izquierdo.
border-right-color cambia el color del borde derecho.

El siguiente ejemplo muestra el efecto de todas estas propiedades:

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad de estilo de borde

La propiedad de estilo de borde le permite seleccionar uno de los siguientes estilos de borde:

none- Sin borde. (Equivalente de ancho de borde: 0;)
solid - El borde es una sola línea sólida.
dotted - El borde es una serie de puntos.
dashed - El borde es una serie de líneas cortas.
double - El borde son dos líneas continuas.
groove - El borde parece tallado en la página.
ridge - El borde se ve lo opuesto al surco.
inset - El borde hace que parezca que el cuadro está incrustado en la página.
outset - El borde hace que parezca que la caja está saliendo del lienzo.
hidden - Igual que ninguno, excepto en términos de resolución de conflictos fronterizos para elementos de tabla.

Puede cambiar individualmente el estilo de los bordes inferior, izquierdo, superior y derecho de un elemento utilizando las siguientes propiedades:

border-bottom-style cambia el estilo del borde inferior.
border-top-style cambia el estilo del borde superior.
border-left-style cambia el estilo del borde izquierdo.
border-right-style cambia el estilo del borde derecho.

El siguiente ejemplo muestra todos estos estilos de borde:

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad del ancho del borde

La propiedad border-width le permite establecer el ancho de los bordes de un elemento. El valor de esta propiedad puede ser una longitud en px, pt o cm o debe establecerse en delgado, medio o grueso.

Puede cambiar individualmente el ancho de los bordes inferior, superior, izquierdo y derecho de un elemento utilizando las siguientes propiedades:

border-bottom-width cambia el ancho del borde inferior.
border-top-width cambia el ancho del borde superior.
border-left-width cambia el ancho del borde izquierdo.
border-right-width cambia el ancho del borde derecho.

El siguiente ejemplo muestra todos estos anchos de borde:

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

Producirá el siguiente resultado:

Propiedades de borde usando taquigrafía

La propiedad del borde le permite especificar el color, el estilo y el ancho de las líneas en una propiedad:

El siguiente ejemplo muestra cómo utilizar las tres propiedades en una sola propiedad. Esta es la propiedad que se usa con más frecuencia para establecer un borde alrededor de cualquier elemento.

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Producirá el siguiente resultado: