6XC

Generador de Bordes CSS

Diseña un borde de forma visual — grosor, estilo (solid, dashed, dotted, double…), color y radio — con vista previa en vivo.

673 visitas

La propiedad border

Forma abreviada: border: grosor estilo color, por ejemplo border: 2px dashed #5b3df5. Los estilos incluyen solid, dashed, dotted, double, groove, ridge, inset y outset. Combínalo con border-radius para marcos redondeados, o aplica el estilo a un solo lado (border-top, …) para acentos como el subrayado de una pestaña.

Preguntas Frecuentes

¿Por qué mi borde cambia el tamaño del elemento?

Por defecto los bordes se suman a las dimensiones de la caja. Activa box-sizing: border-box para que el ancho y el alto incluyan el borde — el estándar moderno que aplican la mayoría de los resets.

¿Cuánto grosor necesita un borde para que se vea double?

El estilo double necesita al menos 3px — dos líneas más el espacio entre ellas. Por debajo de eso se dibuja como una sola línea.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar