Generador de bordes CSS

Todas las herramientas

Opciones de borde

frontera
Color y radio
Estado
inactivo

Vista previa en vivo

Vista previa del borde

Acerca del generador de bordes CSS

CSS Border Generator le ayuda a crear declaraciones de bordes visualmente. Puede ajustar el ancho, el estilo, el color y el radio mientras ve el resultado inmediatamente.

Úselo para tarjetas, botones, insignias, contenedores, paneles y otros elementos de la interfaz de usuario que necesitan un estilo de borde limpio.

como usarlo

  1. Elija un ancho, estilo, color y radio de borde.
  2. Consulte la vista previa en vivo a la derecha.
  3. Copie el valor del borde o la regla CSS completa.
  4. Pega el CSS generado en tu hoja de estilo.

Consejos

  • Utilice bordes discontinuos o punteados para elementos secundarios de la interfaz de usuario.
  • Utilice valores de radio de borde más grandes para diseños de tarjetas más suaves.
  • Combine estilos de borde con box shadows para conseguir una jerarquía visual más sólida.

Herramientas relacionadas

Estas herramientas también pueden resultarle útiles.

Preguntas frecuentes sobre el generador de bordes CSS

¿Qué genera esta herramienta?
Genera valores de borde CSS y radio de borde que puedes copiar en tu hoja de estilo.
¿Puedo analizar un valor de borde existente?
Sí. Pegue un valor de borde como 2px con guiones #f97316 y haga clic en Analizar.
¿Admite radio de borde?
Sí. La herramienta incluye un control de radio de borde y lo genera como una regla CSS separada.
¿Puedo usar colores con nombre?
Sí. El CSS generado puede usar colores hexadecimales, valores rgb o colores CSS con nombre.