Generador de borde CSS personalizado
Ajusta el grosor, el estilo, el color y el redondeo de un borde CSS — de forma uniforme o por lado — con una vista previa en directo, y luego copia el código listo para usar. Procesamiento 100% local — nada se envía a un servidor.
Cómo funciona
Un borde CSS combina tres datos: un grosor, un estilo de trazo y un color, opcionalmente redondeado con border-radius. Esta herramienta te permite ajustar estos valores de forma uniforme en los cuatro lados o de manera independiente para cada lado, con un resultado visual inmediato para validar el efecto antes de copiar el código.
¿Cuál es la diferencia entre "groove", "ridge", "inset" y "outset"?
Estos cuatro estilos simulan un efecto de relieve en 3D a partir del color elegido: "groove" da la impresión de un surco hundido, "ridge" de una arista en relieve, "inset" de un marco hundido y "outset" de un marco en saliente; el resultado exacto depende del navegador y del color de fondo utilizado.
¿Por qué separar los grosores por lado en lugar de usar el atajo "border"?
El atajo border no permite fijar un grosor distinto por lado; para un efecto asimétrico (borde grueso arriba, fino en los lados), hay que usar las propiedades detalladas border-top-width, border-right-width, etc., como hace esta herramienta cuando la opción "mismo grosor" está desactivada.
No se transmite ningún dato a un servidor: la vista previa y el código se generan directamente en tu navegador.