Propiedad border-width

La propiedad border-width establece el grosor del borde para todos los lados simultáneamente o por separado para cada lado. Es una propiedad abreviada para las propiedades border-left-width, border-right-width, border-top-width, border-bottom-width.

Los valores de la propiedad son cualquier unidad de tamaño, excepto porcentajes, o las palabras clave thin (borde de 2 píxeles), medium (borde de 4 píxeles) o thick (borde de 6 píxeles). El valor por defecto es: medium.

Sintaxis

selector {
	border-width: 1, 2, 3 o 4 valores;
}

Cantidad de valores

La propiedad puede tomar 1, 2, 3 o 4 valores, especificados separados por espacios:

Cantidad	Descripción
`1`	El tipo para todos los lados simultáneamente.
`2`	Primer valor para arriba y abajo, segundo - para los bordes izquierdo y derecho.
`3`	Primer valor para arriba, segundo - para los bordes izquierdo y derecho, tercero - para el inferior.
`4`	Primer valor para el borde superior, segundo - para el derecho, tercero - para el inferior, cuarto - para el borde izquierdo.

Ejemplo

Establezcamos un borde con un grosor de un píxel:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos un borde con un grosor de 4 píxeles:

<div id="elem"></div>

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos el grosor del borde superior e inferior en 1px, y el derecho e izquierdo - en 4px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos el grosor del borde superior en 1px, el derecho e izquierdo - en 4px, y el inferior en 6px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos el grosor del borde superior en 1px, el derecho en 4px, el inferior - en 6px, y el izquierdo en 8px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos el grosor del borde con la palabra clave thin:

<div id="elem"></div>

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos el grosor del borde con la palabra clave medium:

<div id="elem"></div>

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos el grosor del borde con la palabra clave thick:

<div id="elem"></div>

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ejemplo

Establezcamos un borde diferente para cada lado:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Véase también

la propiedad border-style,
que establece la apariencia del borde
la propiedad border-color,
que establece el color del borde
la propiedad border,
que es la propiedad abreviada para el borde