Generador CSS de border-radius
Da forma a una caja CSS vacía con radios horizontales y verticales independientes. Combina píxeles y porcentajes, elige las dimensiones y copia la declaración original en lugar de los píxeles redondeados del diagnóstico.
Crea una forma en tres pasos
- Define el ancho y el alto entre 1 y 2000 píxeles CSS. Introduce los radios horizontal y vertical de cada esquina en px o %, o aplica los de la esquina superior izquierda a todas.
- Observa la vista ajustada. Los porcentajes horizontales usan el ancho y los verticales el alto; cambiar de unidad conserva el número pero cambia su significado.
- Elige Solo radio o CSS de la caja y copia el resultado completo. Si no puedes copiarlo, selecciona el texto de solo lectura. Los campos inválidos eliminan el resultado actual.
Los dos radios de cada esquina
Cada esquina tiene un radio horizontal y otro vertical. La barra de border-radius separa cuatro valores horizontales de cuatro verticales, ordenados superior izquierda, superior derecha, inferior derecha e inferior izquierda.
Los porcentajes horizontales usan el ancho y los verticales el alto. En una caja rectangular, 50 % en ambas direcciones forma una elipse, no necesariamente un círculo. Una componente cero hace cuadrada la esquina.
Si radios adyacentes se superponen en un borde, el navegador reduce las ocho componentes con un factor común. Los píxeles resueltos y utilizados describen esta caja; sus valores redondeados no sustituyen al CSS original.
La vista dispone la caja con sus dimensiones declaradas antes de ajustarla visualmente. El radio por sí solo puede dar otro resultado en una caja de distinto tamaño. El CSS de caja añade dimensiones, border-box y borde y relleno cero, sin los colores de la vista.
Ejemplos con unidades mixtas
En una caja de 240 por 120, los valores horizontales 75 %, 120 px, 20 %, 30 px y verticales 40 px, 60 %, 60 px, 50 % dan un factor común de 0,8. Los radios superiores pasan a 144 y 96 px y las demás componentes también se reducen.
Con los mismos valores en una caja de 120 por 240, el factor limitante es 4/7. La forma cambia sin convertir los porcentajes a píxeles fijos.
En una caja de 240 por 120, radios de 50 % en ambas direcciones equivalen a 120 y 60 px. Todos los radios a cero dejan esquinas cuadradas.
Alcance e interpretación
El editor admite radios no negativos de hasta 4000 px o 1000 %, con hasta tres decimales. No interpreta CSS arbitrario, calc(), var(), esquinas lógicas ni otras unidades.
Usa un punto o una coma decimal, sin separadores de miles. Cambiar la unidad conserva el número, no la longitud resuelta. Los campos vacíos, incompletos o inválidos eliminan la vista y la copia actuales.
Los píxeles utilizados y el factor son explicaciones redondeadas para esta caja. El renderizado puede redondear subpíxeles; el CSS copiado conserva los valores y unidades originales.
El ajuste solo cambia la visualización, no la caja lógica ni la regla exportada. En otra caja el navegador vuelve a calcular porcentajes y reducción.
El radio da forma al fondo o borde, pero no recorta siempre los elementos hijos. No se incluye carga de imágenes, arrastre, animación ni una regla overflow.
Estilos locales sin borradores guardados
La herramienta no añade cargas, historial ni enlaces o solicitudes con tus ajustes. La copia es explícita. Los servicios existentes, las extensiones y tus propias copias quedan fuera de cualquier promesa general de borrado.
Preguntas sobre las esquinas
Fuentes
La especificación define la geometría usada por esta herramienta.
Revisado el 12 de noviembre de 2026.
El diagnóstico describe la especificación; el resultado real puede variar por el redondeo subpíxel del navegador.
Herramientas relacionadas
SVG a PNG
Convierte un archivo SVG local o código pegado en PNG, con dimensiones definidas, transparencia y fuentes incluidas.
Abrir herramienta — SVG a PNGGenerador de filtros CSS
Ordena y repite efectos CSS, compara una muestra y copia la declaración exacta.
Abrir herramienta — Generador de filtros CSSCalculadora de tamaño de fuente fluido
Define el tamaño de fuente para dos anchos de ventana gráfica. Copia el CSS relativo a la raíz y consulta el modelo calculado con los mismos coeficientes exportados.
Abrir herramienta — Calculadora de tamaño de fuente fluidoGenerador de botones CSS
Diseña los estados de un botón nativo, comprueba el foco y copia HTML y CSS.
Abrir herramienta — Generador de botones CSSGenerador CSS Grid
Crea un ejemplo de CSS Grid con pistas, ubicación y áreas con nombre. Previsualiza, copia CSS o HTML y descarga el ejemplo completo.
Abrir herramienta — Generador CSS GridGenerador CSS Flexbox
Cree un ejemplo de Flexbox con controles de elementos y contenedores, ejes de diseño explícitos, CSS y HTML coincidentes y una descarga local completa del ejemplo.
Abrir herramienta — Generador CSS FlexboxGenerador CSS de sombras de texto
Crea sombras de texto ordenadas, previsualiza texto plano y copia el CSS exacto.
Abrir herramienta — Generador CSS de sombras de textoGenerador de transformación CSS
Redacte transformaciones CSS 2D repetibles, edite px o porcentaje de traducción y origen, inspeccione un cuadro de referencia y copie las declaraciones actuales exactas.
Abrir herramienta — Generador de transformación CSSGenerador de sombras CSS
Crea capas box-shadow ordenadas, previsualiza el resultado y copia el código CSS.
Abrir herramienta — Generador de sombras CSSMarca de agua en imágenes
Añade texto o un logotipo a las imágenes, revisa los resultados y descarga archivos individuales o un ZIP.
Abrir herramienta — Marca de agua en imágenesGenerador de degradados CSS
Crea degradados lineales o radiales con colores, opacidad y puntos ajustables.
Abrir herramienta — Generador de degradados CSSConversor de colores
Convierte valores sRGB HEX, RGB y HSL compatibles con alfa y precisión explícita.
Abrir herramienta — Conversor de coloresImagen a texto (OCR)
Reconoce texto impreso en PNG o JPEG locales, elige el idioma y revisa o corrige el resultado antes de copiarlo o descargarlo.
Abrir herramienta — Imagen a texto (OCR)Lector de QR desde imagen
Lee un código QR de un PNG o JPEG local y examina el texto o los bytes sin abrir enlaces.
Abrir herramienta — Lector de QR desde imagenComprobador de contraste de colores
Compara los colores del primer plano y del fondo, ajusta la opacidad y comprueba los umbrales numéricos WCAG para texto y detalles esenciales de la interfaz.
Abrir herramienta — Comprobador de contraste de coloresCalculadora de tamaño de impresión y resolución
Calcula el tamaño de impresión, los píxeles necesarios y los PPI efectivos con márgenes o recorte.
Abrir herramienta — Calculadora de tamaño de impresión y resoluciónCalculadora de relación de aspecto
Calcula la relación entre anchura y altura o nuevas dimensiones en píxeles fijando un solo lado.
Abrir herramienta — Calculadora de relación de aspectoCompresor de imágenes
Intenta ajustar un JPEG, PNG o WebP a un tamaño de archivo objetivo, con resultados medidos y reducción opcional de dimensiones.
Abrir herramienta — Compresor de imágenesHEIC a JPG
Convierte fotos HEIC compatibles en copias JPG a tamaño completo, con calidad y fondo ajustables y descargas verificadas individuales o en ZIP.
Abrir herramienta — HEIC a JPGConversor de imágenes
Convierte imágenes PNG, JPEG y WebP localmente, ajusta transparencia, fondo y calidad, y descarga los resultados.
Abrir herramienta — Conversor de imágenesCreador de collages de fotos
Organiza fotos locales en una cuadrícula y descarga un PNG o JPEG.
Abrir herramienta — Creador de collages de fotosGirar y reflejar imágenes
Gira o refleja un lote local de imágenes estáticas PNG, JPEG y WebP; revisa y descarga los resultados procesados.
Abrir herramienta — Girar y reflejar imágenesRecortar imagen
Recorta un JPEG, PNG o WebP local con precisión en píxeles y descarga el resultado en PNG o JPEG.
Abrir herramienta — Recortar imagenCambiar tamaño de imagen
Cambia el tamaño de JPG, PNG o WebP en píxeles o porcentaje, revisa y descarga el resultado.
Abrir herramienta — Cambiar tamaño de imagen