CSS: Agregar línea de borde punteada con border-style: dotted
📝 Uso
Esta plantilla demuestra cómo usar la propiedad border-style: dotted en CSS para crear una línea de borde punteada.
📘 Explicación
El código CSS anterior utiliza la propiedad border-style: dotted para agregar una línea punteada debajo del elemento h1. Puedes ajustar el color y el grosor según sea necesario.
🔹 Código Parcial
Este cuadro tiene una línea de borde punteada.
<div class="demo-area">
<p>Este cuadro tiene una línea de borde punteada.</p>
</div>
<style>
.demo-area {
margin: 20px 0;
padding: 10px;
border: 2px dotted #333;
text-align: center;
background-color: #f0f0f0;
}
</style>
💻 Código HTML Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar línea de borde punteada con border-style: dotted</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
margin: 20px 0;
padding: 10px;
border: 2px dotted #333;
text-align: center;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="demo-area">
<p>Este cuadro tiene una línea de borde punteada.</p>
</div>
</body>
</html>
💻 Código Completo Funcional
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar línea de borde punteada con border-style: dotted</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
margin: 20px 0;
padding: 10px;
border: 2px dotted #333;
text-align: center;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="demo-area">
<p>Este cuadro tiene una línea de borde punteada.</p>
</div>
</body>
</html>
✏️ Técnicas prácticas para el uso de bordes punteados
El uso de border-style: dotted permite agregar un acento visual ligero y efectivo al diseño. A diferencia de las líneas sólidas, los bordes punteados ofrecen un efecto visual distinto que puede usarse para separar contenido o como elemento decorativo.
🎨 Variaciones de diseño
Además del color negro básico (#333), puedes adaptar el color del borde al tema cromático del sitio. Por ejemplo, usar #007acc (azul) o #e74c3c (rojo) para llamar la atención, o #999 para un efecto más sutil. También puedes ajustar border-width para cambiar el tamaño de los puntos y crear diferentes estilos.
📐 Ejemplos de uso en el diseño
Los bordes punteados son especialmente efectivos en los siguientes casos:
- Líneas divisorias entre secciones
- Delimitación de textos auxiliares en formularios
- Diseño tipo cupón o ticket
- Cuadros para advertencias o notas legales
⚠️ Consideraciones al usar
Los bordes punteados tienen menor visibilidad que los sólidos, por lo que no son adecuados para resaltar información crítica. Además, en impresión pueden no renderizarse bien, por lo que se recomienda usar border-style: solid en el CSS para impresión.
Los bordes punteados son un recurso decorativo eficaz, pero su uso excesivo puede generar una sensación de desorden. Es importante definir un uso coherente en todo el sitio y reservarlos para fines específicos.