La Propiedad BORDER-WIDTH

La propiedad border-width en CSS se utiliza para establecer el grosor de los cuatro bordes (superior, derecho, inferior e izquierdo) de un elemento HTML.

La propiedad border-width define el grosor de los bordes de un elemento. Puede establecer un ancho uniforme o valores individuales para cada lado, usando unidades como px, em, rem o palabras clave (thin, medium, thick).

Sintaxis Básica

css

/* Valores predefinidos */
border-width: thin;    /* Borde delgado (generalmente 1px) */
border-width: medium;  /* Borde medio (generalmente 3px) - valor por defecto */
border-width: thick;   /* Borde grueso (generalmente 5px) */

/* Valores numéricos */
border-width: 2px;
border-width: 0.1em;
border-width: 0.5rem;

/* Múltiples valores */
border-width: 2px 4px;           /* arriba/abajo | izquierda/derecha */
border-width: 1px 2px 3px;        /* arriba | izquierda/derecha | abajo */
border-width: 1px 2px 3px 4px;    /* arriba | derecha | abajo | izquierda */

Valores Disponibles

Palabras clave predefinidas:

css

.border-thin {
  border-width: thin;   /* Normalmente 1px */
}

.border-medium {
  border-width: medium; /* Normalmente 3px */
}

.border-thick {
  border-width: thick;  /* Normalmente 5px */
}

Unidades comunes:

px - Píxeles
em - Relativo al tamaño de fuente del elemento
rem - Relativo al tamaño de fuente raíz
% - No se recomienda para border-width
pt - Puntos (1/72 pulgada)

Estructura de Subpropiedades

La propiedad border-width es una abreviatura que combina:

border-top-width
border-right-width
border-bottom-width
border-left-width

css

/* Cada lado individualmente */
.box {
  border-top-width: 3px;
  border-right-width: 2px;
  border-bottom-width: 1px;
  border-left-width: 4px;
}

/* Es lo mismo que: */
.box {
  border-width: 3px 2px 1px 4px;
}

Ejemplos Básicos

Ejemplo 1: Diferentes grosores

html

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.box {
  padding: 20px;
  text-align: center;
  border-style: solid;
  border-color: #3498db;
  background: #ecf0f1;
}

.box-thin {
  border-width: thin;
}

.box-medium {
  border-width: medium;
}

.box-thick {
  border-width: thick;
}

.box-5px {
  border-width: 5px;
}

.box-10px {
  border-width: 10px;
}
</style>
</head>
<body>
<div class="container">
  <div class="box box-thin">thin</div>
  <div class="box box-medium">medium</div>
  <div class="box box-thick">thick</div>
  <div class="box box-5px">5px</div>
  <div class="box box-10px">10px</div>
</div>
</body>
</html>

Ejemplo 2: Bordes asimétricos

html

<!DOCTYPE html>
<html>
<head>
<style>
.asymmetric-box {
  width: 300px;
  height: 150px;
  margin: 20px;
  border-style: solid;
  border-color: #e74c3c #3498db #27ae60 #f39c12;
  border-width: 10px 5px 15px 20px; /* arriba: 10px, derecha: 5px, abajo: 15px, izquierda: 20px */
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #f9f9f9;
}

.variation-box {
  width: 300px;
  height: 150px;
  margin: 20px;
  border-style: solid;
  border-color: #9b59b6;
  border-width: 8px 8px 2px 2px; /* Superior e inferior diferentes */
  padding: 20px;
}
</style>
</head>
<body>
<div class="asymmetric-box">
  Bordes asimétricos: superior 10px, derecha 5px, inferior 15px, izquierda 20px
</div>

<div class="variation-box">
  Superior e inferior: 8px<br>
  Derecha e izquierda: 2px
</div>
</body>
</html>

Ejemplos Prácticos

Ejemplo 1: Tarjetas con diferentes estilos

html

<!DOCTYPE html>
<html>
<head>
<style>
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.card {
  width: 250px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  padding: 15px;
  color: white;
  font-weight: bold;
  border-bottom: 4px solid rgba(0,0,0,0.2);
}

.card-content {
  padding: 20px;
}

/* Tarjeta 1: Borde inferior grueso */
.card-1 .card-header {
  background: #3498db;
  border-bottom-width: 6px;
}

/* Tarjeta 2: Borde superior decorativo */
.card-2 {
  border-top: 8px solid #e74c3c;
}

.card-2 .card-header {
  background: #c0392b;
}

/* Tarjeta 3: Múltiples bordes */
.card-3 {
  border: 2px solid #27ae60;
  border-top-width: 8px;
  border-bottom-width: 8px;
}

.card-3 .card-header {
  background: #27ae60;
}

/* Tarjeta 4: Bordes asimétricos llamativos */
.card-4 {
  border-left: 10px solid #f39c12;
  border-right: 4px solid #f39c12;
  border-top: 2px solid #f39c12;
  border-bottom: 2px solid #f39c12;
}

.card-4 .card-header {
  background: #e67e22;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  background: #f9f9f9;
  border: 2px solid currentColor;
  border-width: 2px 2px 4px 2px; /* Efecto 3D sutil */
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: all 0.3s;
}

.button:hover {
  border-bottom-width: 2px;
  border-top-width: 4px;
  transform: translateY(2px);
}
</style>
</head>
<body>
<div class="cards-container">
  <div class="card card-1">
    <div class="card-header">Tarjeta Simple</div>
    <div class="card-content">
      <p>Borde inferior reforzado para destacar el título.</p>
      <a href="#" class="button">Leer más</a>
    </div>
  </div>
  
  <div class="card card-2">
    <div class="card-header">Tarjeta Destacada</div>
    <div class="card-content">
      <p>Borde superior grueso para llamar la atención.</p>
      <a href="#" class="button">Ver detalles</a>
    </div>
  </div>
  
  <div class="card card-3">
    <div class="card-header">Tarjeta Especial</div>
    <div class="card-content">
      <p>Bordes superior e inferior reforzados.</p>
      <a href="#" class="button">Explorar</a>
    </div>
  </div>
  
  <div class="card card-4">
    <div class="card-header">Tarjeta Lateral</div>
    <div class="card-content">
      <p>Borde izquierdo extra grueso como énfasis.</p>
      <a href="#" class="button">Acceder</a>
    </div>
  </div>
</div>
</body>
</html>

Ejemplo 2: Efectos de botones con border-width

html

<!DOCTYPE html>
<html>
<head>
<style>
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* Botón 1: Efecto 3D */
.btn-3d {
  background: #3498db;
  color: white;
  border: none;
  border-bottom: 5px solid #2980b9;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-3d:hover {
  border-bottom-width: 2px;
  transform: translateY(3px);
}

.btn-3d:active {
  border-bottom-width: 1px;
  transform: translateY(4px);
}

/* Botón 2: Borde interior */
.btn-inset {
  background: transparent;
  color: #e74c3c;
  border: 3px solid #e74c3c;
  border-width: 3px 3px 6px 3px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-inset:hover {
  border-width: 6px 3px 3px 3px;
  background: #e74c3c;
  color: white;
}

/* Botón 3: Efecto neón */
.btn-neon {
  background: #2c3e50;
  color: #1abc9c;
  border: 2px solid #1abc9c;
  border-width: 2px 8px 8px 2px;
  padding: 15px 30px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(26, 188, 156, 0.4);
}

.btn-neon:hover {
  border-width: 8px 2px 2px 8px;
  color: #2c3e50;
  background: #1abc9c;
}

/* Botón 4: Múltiples bordes */
.btn-multi {
  position: relative;
  background: #9b59b6;
  color: white;
  border: 3px solid #8e44ad;
  border-width: 5px 5px 10px 5px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 3px 0 #6c3483;
}

.btn-multi:hover {
  border-width: 10px 5px 5px 5px;
  box-shadow: 0 5px 0 #6c3483;
  transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="button-container">
  <button class="btn-3d">Efecto 3D</button>
  <button class="btn-inset">Borde Inverso</button>
  <button class="btn-neon">Estilo Neón</button>
  <button class="btn-multi">Multi Borde</button>
</div>
</body>
</html>

Ejemplo 3: Bordes en tablas

html

<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
  width: 80%;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

.styled-table thead tr {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.styled-table th {
  border-right: 3px solid rgba(255,255,255,0.3);
  border-bottom: 5px solid rgba(0,0,0,0.2);
  padding: 15px;
  text-align: left;
}

.styled-table th:last-child {
  border-right: none;
}

.styled-table td {
  padding: 12px 15px;
  border-bottom: 2px solid #ddd;
  border-right: 1px solid #eee;
}

.styled-table td:last-child {
  border-right: none;
}

.styled-table tbody tr:hover {
  background: #f5f5f5;
}

/* Celda especial con borde destacado */
.highlight-cell {
  border-left: 8px solid #f39c12 !important;
  background: #fef5e7;
  font-weight: bold;
}

.border-examples {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.example-item {
  flex: 1;
  padding: 20px;
  background: white;
  border: 2px solid #3498db;
  text-align: center;
}

.example-1 {
  border-width: 4px 4px 8px 4px;
}

.example-2 {
  border-width: 8px 4px 4px 4px;
}

.example-3 {
  border-width: 4px 8px 4px 8px;
}
</style>
</head>
<body>
<div class="table-container">
  <table class="styled-table">
    <thead>
      <tr>
        <th>Producto</th>
        <th>Categoría</th>
        <th>Precio</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="highlight-cell">Laptop Pro</td>
        <td>Electrónica</td>
        <td>$1,299</td>
        <td>15</td>
      </tr>
      <tr>
        <td>Smartphone X</td>
        <td>Electrónica</td>
        <td>$899</td>
        <td>23</td>
      </tr>
      <tr>
        <td>Tablet Mini</td>
        <td>Electrónica</td>
        <td>$499</td>
        <td>8</td>
      </tr>
    </tbody>
  </table>
  
  <div class="border-examples">
    <div class="example-item example-1">
      <h4>Borde Inferior</h4>
      <p>8px abajo</p>
    </div>
    <div class="example-item example-2">
      <h4>Borde Superior</h4>
      <p>8px arriba</p>
    </div>
    <div class="example-item example-3">
      <h4>Bordes Laterales</h4>
      <p>8px izquierda/derecha</p>
    </div>
  </div>
</div>
</body>
</html>

Valores Lógicos CSS

Para diseños responsivos y multilingües:

css

.logical-borders {
  border-block-start-width: 5px;   /* Borde superior */
  border-block-end-width: 3px;     /* Borde inferior */
  border-inline-start-width: 10px; /* Borde izquierdo (o derecho en RTL) */
  border-inline-end-width: 2px;    /* Borde derecho (o izquierdo en RTL) */
}

Mejores Prácticas

1. Combinar con border-style

css

/* border-width solo funciona si hay border-style */
.box {
  border-style: solid; /* Necesario */
  border-width: 4px;
  border-color: #3498db;
}

/* También funciona con shorthand */
.box {
  border: 4px solid #3498db;
}

2. Responsive design

css

.responsive-border {
  border: 2px solid #3498db;
}

@media (max-width: 768px) {
  .responsive-border {
    border-width: 1px; /* Más delgado en móviles */
  }
}

3. Accesibilidad

css

/* Asegurar contraste adecuado */
.accessible-box {
  border: 4px solid #000;
  border-width: 4px 4px 8px 4px; /* Énfasis en borde inferior */
}

Propiedades Relacionadas

css

.box {
  /* Shorthands comunes */
  border: 4px solid #3498db;
  border-top: 6px dashed #e74c3c;
  
  /* Propiedades específicas */
  border-width: 4px 2px;
  border-style: solid dotted;
  border-color: #3498db #e74c3c;
  
  /* Bordes individuales */
  border-top-width: 8px;
  border-right-width: 4px;
  border-bottom-width: 2px;
  border-left-width: 6px;
}

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Completo	1+
Firefox	✅ Completo	1+
Safari	✅ Completo	1+
Edge	✅ Completo	12+
IE	✅ Completo	4+

Ejemplo Interactivo Final

html

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.demo-container {
  width: 800px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.controls {
  background: #2c3e50;
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.control-group {
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

label {
  min-width: 120px;
}

input[type="range"] {
  flex: 1;
  max-width: 300px;
}

input[type="color"] {
  width: 50px;
  height: 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

select, input[type="text"] {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

.demo-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 200px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.code-display {
  background: #34495e;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  margin-top: 20px;
  overflow-x: auto;
}

.value-display {
  background: #1abc9c;
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}

.preset-buttons {
  display: flex;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.preset-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background: #3498db;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.preset-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
}
</style>
</head>
<body>

<div class="demo-container">
  <div class="controls">
    <h3>Personaliza border-width</h3>
    
    <div class="preset-buttons">
      <button class="preset-btn" onclick="setPreset('thin')">thin</button>
      <button class="preset-btn" onclick="setPreset('medium')">medium</button>
      <button class="preset-btn" onclick="setPreset('thick')">thick</button>
      <button class="preset-btn" onclick="setPreset('asymmetric')">Asimétrico</button>
      <button class="preset-btn" onclick="setPreset('reset')">Reset</button>
    </div>
    
    <div class="control-group">
      <label>border-top-width:</label>
      <input type="range" id="topWidth" min="0" max="20" value="4">
      <span class="value-display" id="topValue">4px</span>
    </div>
    
    <div class="control-group">
      <label>border-right-width:</label>
      <input type="range" id="rightWidth" min="0" max="20" value="4">
      <span class="value-display" id="rightValue">4px</span>
    </div>
    
    <div class="control-group">
      <label>border-bottom-width:</label>
      <input type="range" id="bottomWidth" min="0" max="20" value="4">
      <span class="value-display" id="bottomValue">4px</span>
    </div>
    
    <div class="control-group">
      <label>border-left-width:</label>
      <input type="range" id="leftWidth" min="0" max="20" value="4">
      <span class="value-display" id="leftValue">4px</span>
    </div>
    
    <div class="control-group">
      <label>border-style:</label>
      <select id="borderStyle">
        <option value="solid">solid</option>
        <option value="dashed">dashed</option>
        <option value="dotted">dotted</option>
        <option value="double">double</option>
        <option value="groove">groove</option>
        <option value="ridge">ridge</option>
        <option value="inset">inset</option>
        <option value="outset">outset</option>
      </select>
    </div>
    
    <div class="control-group">
      <label>border-color:</label>
      <input type="color" id="borderColor" value="#3498db">
    </div>
  </div>
  
  <div class="demo-box" id="demoBox">
    border-width personalizable
  </div>
  
  <div class="code-display" id="codeDisplay">
/* CSS generado */
border-style: solid;
border-color: #3498db;
border-width: 4px 4px 4px 4px;
  </div>
</div>

<script>
const demoBox = document.getElementById('demoBox');
const codeDisplay = document.getElementById('codeDisplay');

const topWidth = document.getElementById('topWidth');
const rightWidth = document.getElementById('rightWidth');
const bottomWidth = document.getElementById('bottomWidth');
const leftWidth = document.getElementById('leftWidth');
const borderStyle = document.getElementById('borderStyle');
const borderColor = document.getElementById('borderColor');

const topValue = document.getElementById('topValue');
const rightValue = document.getElementById('rightValue');
const bottomValue = document.getElementById('bottomValue');
const leftValue = document.getElementById('leftValue');

function updateBorder() {
  const top = topWidth.value;
  const right = rightWidth.value;
  const bottom = bottomWidth.value;
  const left = leftWidth.value;
  const style = borderStyle.value;
  const color = borderColor.value;
  
  // Actualizar display
  topValue.textContent = top + 'px';
  rightValue.textContent = right + 'px';
  bottomValue.textContent = bottom + 'px';
  leftValue.textContent = left + 'px';
  
  // Aplicar estilos
  demoBox.style.borderStyle = style;
  demoBox.style.borderColor = color;
  demoBox.style.borderTopWidth = top + 'px';
  demoBox.style.borderRightWidth = right + 'px';
  demoBox.style.borderBottomWidth = bottom + 'px';
  demoBox.style.borderLeftWidth = left + 'px';
  
  // Actualizar código
  codeDisplay.textContent = `/* CSS generado */
border-style: ${style};
border-color: ${color};
border-width: ${top}px ${right}px ${bottom}px ${left}px;`;
}

function setPreset(type) {
  switch(type) {
    case 'thin':
      topWidth.value = rightWidth.value = bottomWidth.value = leftWidth.value = 1;
      break;
    case 'medium':
      topWidth.value = rightWidth.value = bottomWidth.value = leftWidth.value = 3;
      break;
    case 'thick':
      topWidth.value = rightWidth.value = bottomWidth.value = leftWidth.value = 5;
      break;
    case 'asymmetric':
      topWidth.value = 8;
      rightWidth.value = 2;
      bottomWidth.value = 4;
      leftWidth.value = 12;
      break;
    case 'reset':
      topWidth.value = rightWidth.value = bottomWidth.value = leftWidth.value = 4;
      borderStyle.value = 'solid';
      borderColor.value = '#3498db';
      break;
  }
  updateBorder();
}

// Event listeners
[topWidth, rightWidth, bottomWidth, leftWidth, borderStyle, borderColor].forEach(input => {
  input.addEventListener('input', updateBorder);
});

// Inicializar
updateBorder();
</script>

</body>
</html>

Resumen

La propiedad border-width es fundamental para controlar la apariencia de los bordes. Recuerda:

Siempre requiere border-style para ser visible
Puede usar valores predefinidos (thin, medium, thick) o unidades específicas
Permite control individual de cada lado
Es clave para efectos visuales como botones 3D, tarjetas y énfasis visual