Generador de estilos de borde CSS

Funciones

• Siete estilos: sólido, discontinuo, punteado, doble, ranura 3D, relieve 3D y patrón de ondas
• Ancho de borde de 1 a 20px y selector de color
• Cuatro radios de esquina configurables por separado, o estirados a esquinas elípticas
• Salida con forma de barra para esquinas elípticas (radios horizontal y vertical)
• Dibuja solo el borde superior, derecho, inferior o izquierdo
• Guiones controlables o patrones de ondas con border-image
• La vista previa se actualiza al instante, sin botón de generar
• Abajo, declaraciones border y border-radius listas para copiar
• Todo se calcula en tu navegador: no se sube nada

Cómo se usa

1. Elige un estilo y ajusta el ancho y el color
2. Rellena las cuatro esquinas, o sube el radio vertical para esquinas elípticas
3. Para dibujar un solo lado, elige ese lado
4. Para guiones controlables o un patrón, activa el interruptor de border-image

Preguntas frecuentes

¿Por qué no puedo controlar la longitud de los guiones?

Porque la especificación no fija la longitud de los guiones ni de los huecos. Cada navegador los dibuja con sus propias proporciones, así que `border-style: dashed` solo aporta la idea de una línea alterna, sin ningún parámetro para la longitud del segmento. Para longitudes fijas, por ejemplo guiones de 8px con huecos de 4px, hay que pasar a `border-image` con un degradado repetido: la banda de color hace de guion y la banda transparente de hueco, así que la longitud es la que escribas en el degradado. El interruptor de guiones controlables de esta herramienta va exactamente por ahí.

¿Por qué mi caja creció al añadir un borde?

Porque el `box-sizing` predeterminado es `content-box`: `width` cubre solo el contenido, y `border` y `padding` se suman aparte. Una caja de 200px con un borde de 8px ocupa en realidad 216px. La solución es `box-sizing: border-box` en el elemento (normalmente se fija una vez de forma global en los proyectos modernos); después `width` incluye el borde y cambiarlo ya no altera el tamaño total.

¿Cómo doy radios distintos a las cuatro esquinas?

Con `border-radius`, los valores separados por espacios van en orden superior izquierda, superior derecha, inferior derecha, inferior izquierda (en sentido horario desde la superior izquierda). Con dos valores son superior izquierda con inferior derecha, y luego superior derecha con inferior izquierda; con tres, el último rellena la inferior izquierda. Para esquinas elípticas (cada una un cuarto de elipse en vez de un cuarto de círculo) se usa la barra: radios horizontales antes y verticales después, como en `10px 20px 30px 40px / 5px 10px 15px 20px`. El porcentaje de radio vertical de esta herramienta produce justo esa segunda lista.

¿Dibujar un solo lado afecta a la maquetación?

Un poco. Con solo `border-top`, los otros tres lados cuentan como ancho cero, así que el elemento crece solo esos pocos píxeles arriba; en cuanto se escribe el `border` completo, los cuatro lados ocupan espacio. Donde la maquetación es sensible (tablas, rejillas) combínalo con `box-sizing: border-box`, o dibuja una línea que no ocupe espacio con `outline` o una `box-shadow`.