Bordes

Estilo

La propiedad border-style especifica el tipo de borde a mostrar para el elemento HTML seleccionado. Su sintaxis es la siguiente:

/* Mismo estilo para los 4 bordes (superior, derecho, inferior, izquierdo) */
border-style: style;

/* Bordes diferenciados para los bordes laterales y los superiores e inferiores */
border-style: styleVertical styleLateral;

/* Bordes diferenciados */
border-style: styleTop styleRight styleBottom styleLeft;

/* Bordes diferenciados e indicados explícitamente */
border-top-style: style;
border-right-style: style;
border-bottom-style: style;
border-left-style: style;s

Los valores admitidos por la propiedad se muestran a continuación a modo de ejemplo:

Color

La propiedad border-color especifica el color del borde a mostrar para el elemento HTML seleccionado. Su sintaxis es la siguiente:

/* Mismo color para los 4 bordes (superior, derecho, inferior, izquierdo) */
border-color: color;

/* Colores diferenciados para los bordes laterales y los superiores e inferiores */
border-color: colorVertical colorLateral;

/* Bordes con colores diferenciados */
border-color: colorTop colorRight colorBottom colorLeft;

/* Bordes con colores diferenciados e indicados explícitamente */
border-top-color: color;
border-right-color: color;
border-bottom-color: color;
border-left-color: color;

Si no se define previamente un estilo de borde que sea visible nunca se verá el color asignado.

Grosor

La propiedad border-width especifica el grosor del borde a mostrar para el elemento HTML seleccionado. Su sintaxis es la siguiente:

/* Mismo grosor para los 4 bordes (superior, derecho, inferior, izquierdo) */
border-width: size;

/* Grosor diferenciado para los bordes laterales y los superiores e inferiores */
border-color: sizeVertical sizeLateral;

/* Bordes con grosores diferenciados */
border-color: sizeTop sizeRight sizeBottom sizeLeft;

/* Bordes con grosores diferenciados e indicados explícitamente */
border-top-width: size;
border-right-width: size;
border-bottom-width: size;
border-left-width: size;

Método abreviado: border

La propiedad border es un método abreviado que permite establecer el grosor, estilo y color del borde del elemento seleccionado mediante una única asignación. El grosor se corresponde con la propiedad border-width, el estilo con la propiedad border-style y el color con la propiedad border-color.

Su sintaxis es la siguiente:

/* Idéntico borde para los 4 lados */
border: width style color;
/* Borde superior diferenciado */
border-top: width style color;
/* Borde lateral derecho diferenciado */
border-right: width style color;
/* Borde inferior diferenciado */
border-bottom: width style color;
/* Borde lateral izquierdo diferenciado */
border-left: width style color;

A continuación, se presentan algunos ejemplos de uso:

/* Borde de 2 píxeles de grosor, rojo y solido */
h1 {
  border: 2px solid red;
}
/* Borde superior de 2 milímetros de grosor, azul y punteado +
   Borde izquierdo con un grosor del 1% el alto del viewport y de estilo dashed */
h2 {
  border-top: 2mm dotted #0000FF;
  border-left: 1vw dashed;
}
/* Borde verde semitransparente y  de estilo doble */
p span {
  border: rgba(0,255,0,0.5) double;
}

Esquinas redondeadas

La propiedad border-radius especifica el grado de redondez de las esquinas del borde a mostrar para el elemento HTML seleccionado.

Su sintaxis es la siguiente:

/* Misma redondez para las 4 esquinas */
border-radius: size;

/* Redondez diferenciada para las 4 esquinas */
border-radius: sizeTopLeft sizeTopRight sizeBottomRight sizeBottomLeft;

Los valores típicos suelen ir de los 5 a los 12 píxeles.