Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de border-radius CSS

CSS Border Radius Generator

Da forma a las cuatro esquinas en píxeles o porcentaje, vinculadas o independientes, y copia la declaración border-radius de cuatro valores.

Ruta de la tarea / de la entrada al resultado

Elige la unidad

Funciona en local · No se sube nada

Cómo funciona Generador de border-radius CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo dar forma a un border-radius CSS

  1. 01

    Elige la unidad

    Define Unidad en Píxeles o Porcentaje; el espacio de trabajo comienza en Píxeles. Los píxeles se mantienen constantes con cualquier tamaño de elemento; los valores en porcentaje escalan con el elemento, que es lo que hace posibles las formas orgánicas asimétricas.

  2. 02

    Ajusta las cuatro esquinas

    Mueve Superior izquierda, Superior derecha, Inferior derecha e Inferior izquierda, cada una de 0 a 100 en la unidad elegida, en pasos de 1. Las cuatro comienzan en 24 px, y la tarjeta de vista previa se redibuja con cada cambio.

  3. 03

    Vincula o desvincula las esquinas

    Mantén Vincular todas las esquinas activado para cambiarlas todas a la vez, o desactívalo para dar forma a cada esquina de forma independiente. El espacio de trabajo lo indica junto al conmutador: mientras estén vinculadas, cambiar una esquina actualiza las cuatro.

  4. 04

    Prueba la forma de ejemplo

    Pulsa Cargar ejemplo para una referencia asimétrica: Superior izquierda e Inferior derecha a 64 px, Superior derecha e Inferior izquierda a 12 px, desvinculadas: la forma de hoja diagonal usada en tarjetas y avatares. Restablecer devuelve el valor uniforme de 24 px por defecto.

  5. 05

    Comprueba la declaración generada

    El resultado siempre enumera cuatro valores en sentido horario — superior izquierda, superior derecha, inferior derecha, inferior izquierda — así que cada esquina permanece explícita al pegarla. La insignia de estado muestra CSS VÁLIDO, y cualquier esquina fuera de rango la cambia a REVISA LOS VALORES y bloquea la copia.

  6. 06

    Copia o descarga el CSS

    Pulsa Copiar CSS para copiar la regla .rounded-card como una declaración border-radius de cuatro valores, o Descargar .css para guardarla como toolars-border-radius.css. La misma declaración funciona en imágenes, botones, tarjetas y cualquier otro elemento.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de border-radius CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de border-radius CSS en realidad

Las esquinas redondeadas marcan el tono de una interfaz: 8 px para un formulario sereno, 24 px para una tarjeta amigable, valores muy asimétricos para la mancha orgánica detrás de una sección héroe. Adivinar cuatro números en una hoja de estilos es lento, sobre todo en porcentaje, donde la curva depende de las proporciones del elemento. Generador de border-radius CSS muestra la forma exacta mientras arrastras, con las esquinas vinculadas para un redondeo uniforme o desvinculadas para formas de hoja y mancha. Después te entrega la declaración, renderizada y validada localmente.

Preguntas frecuentes

¿Cuál es la diferencia entre Píxeles y Porcentaje?
Los píxeles dan a cada esquina un radio fijo sin importar el tamaño del elemento. El porcentaje se resuelve contra las dimensiones del elemento, así que el mismo valor produce una curva distinta en una tarjeta alta que en una ancha: esa relatividad es exactamente lo que permite las formas de elipse y de mancha.
¿Qué hace Vincular todas las esquinas?
Mientras están vinculadas, cambiar cualquier esquina actualiza las cuatro al mismo valor, lo que hace rápido un redondeo uniforme. Desactiva el conmutador para controlar Superior izquierda, Superior derecha, Inferior derecha e Inferior izquierda de forma independiente: el ajuste asimétrico de ejemplo está construido así.
¿Cómo consigo un círculo o una elipse perfectos?
Cambia Unidad a Porcentaje y pon las cuatro esquinas a 50: en un elemento cuadrado el resultado es un círculo perfecto, y en uno rectangular, una elipse. Es la técnica habitual para avatares y píldoras, y la vista previa la muestra antes de que copies nada.
¿Por qué el resultado siempre enumera cuatro valores?
CSS permitiría colapsar valores idénticos en la forma abreviada, pero el generador escribe las cuatro esquinas en sentido horario para que la declaración refleje los cuatro controles con exactitud. Lo que ajustaste es lo que pegas, sin ambigüedad sobre qué esquina da forma cada número.
¿Cuáles son los límites?
Cada esquina acepta de 0 a 100 en la unidad seleccionada, en pasos de 1. Los valores fuera de rango se resaltan con REVISA LOS VALORES, y la copia o descarga queda bloqueada hasta corregirlos.
¿Se sube o se guarda algo?
No. La vista previa y el CSS generado se calculan dentro de esta pestaña del navegador, y ningún valor generado entra en almacenamiento, registros, analítica ni la red.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear