jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Constructor border-radius CSS

Define cada esquina redondeada y genera la declaración CSS border-radius.

Cargando herramienta...

Qué es Constructor border-radius CSS?

border-radius controla cuánto se redondea cada esquina de un elemento, pero la abreviatura de cuatro valores y la sintaxis elíptica de ocho valores pueden ser confusas. Esta herramienta hace que las propiedades sean visuales permitiéndole establecer cada esquina de forma independiente y elegir entre unidades px, rem y porcentaje.

Respuesta rápida

Establezca esquinas redondeadas en cualquier elemento ajustando cada esquina de forma independiente o usando un valor uniforme. Elija unidades px, rem o porcentaje y vea una vista previa en vivo del resultado.

Last updated: 2026-06-11

Limitaciones

  • La herramienta muestra valores de radio uniformes e individuales. No admite la sintaxis elíptica con barra.
  • Los valores porcentuales de border-radius son relativos a las dimensiones del elemento y pueden producir esquinas elípticas inesperadas.
  • Las esquinas redondeadas no recortan el contenido secundario por defecto. Agregue overflow: hidden al padre si es necesario.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Establezca un valor de radio para cada esquina individualmente o active el modo uniforme para aplicar un valor en todas partes.
  2. Elija la unidad que desea usar: px, rem o porcentaje.
  3. Observe la vista previa en vivo actualizarse mientras ajusta cada esquina.
  4. Copie la declaración CSS generada en su hoja de estilo.

Para qué puedes usarla

  • Crear botones en forma de píldora estableciendo border-radius más grande que la altura del botón.
  • Hacer avatares circulares e imágenes de perfil con border-radius: 50%.
  • Diseñar esquinas de tarjetas con redondeo sutil en las esquinas superiores y esquinas inferiores rectas.

Casos de uso

Ejemplos prácticos

Ejemplo

Botón de píldora con radio grande

Un botón de llamada a la acción necesita una forma de píldora completamente redondeada. Establecer border-radius a 999px en un botón corto crea extremos redondeados independientemente del ancho.

Ejemplo

Tarjeta con redondeo sutil de esquinas

Una tarjeta de contenido usa redondeo de 8px en todas las esquinas. El modo uniforme aplica el mismo valor en todas partes.

Errores comunes

  • Usar px en elementos que deberían escalar con el tamaño de fuente.
  • Olvidar la sintaxis de barra para esquinas elípticas.
  • Establecer un radio mayor que la mitad del tamaño del elemento, lo que puede superponer las esquinas.

Verificación

  1. Pruebe el border-radius generado en el elemento objetivo a diferentes tamaños para confirmar proporciones consistentes.
  2. Inspeccione el elemento en DevTools para verificar que los valores calculados de border-radius coincidan con la declaración.

FAQ

Preguntas sobre Constructor border-radius CSS

¿Cómo hago un círculo perfecto?

Establezca border-radius a 50% en un elemento cuadrado. Esto crea un círculo perfecto porque cada esquina se redondea a la mitad del ancho y alto del elemento.

¿Qué unidad debo usar para border-radius?

Use rem para radios que deban escalar con el tamaño de fuente base y px para elementos decorativos de tamaño fijo. Use porcentaje para formas circulares y redondeo fluido.

¿Cómo hago una forma de píldora perfecta?

Establezca border-radius a un valor mayor que la altura del elemento, como 999px, en un botón o insignia rectangular.

¿Puedo usar valores porcentuales para border-radius?

Sí, pero los valores porcentuales se refieren a las dimensiones del elemento. Un 50% en un cuadrado crea un círculo perfecto. En un rectángulo, produce una forma elíptica.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también