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

cssselector {
  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:

Ejemplo

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

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Ejemplo

Establezcamos un borde diferente para cada lado:

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

css#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