Dos porcentajes por esquina forman un border-radius elíptico. Parte de un preajuste o escribe tus valores y copia la regla generada.
Se ejecuta localmente en tu navegadorEl banco de trabajo escribe una sola declaración para el elemento: border-radius con un valor horizontal y otro vertical por esquina, junto con el ancho y el alto que usa la vista previa. El escenario parte de una caja de 280 × 220 px, así que el cambio de 18 % a 50 % se ve al instante.
No hay botón de ejecución: la forma y el panel de código siguen cada cambio. Copiar CSS pone ese mismo bloque en el portapapeles y Restablecer devuelve la página a Esquinas suaves (280 × 220, 18 %).
Personalizado (28 %), Esquinas suaves (18 %) y Píldora (50 % en una caja de 320 × 160) son simétricos: los ocho valores coinciden. Guijarro (290 × 230) y Orgánico (280 × 250) mezclan las esquinas; Guijarro empieza en 58 / 42 arriba a la izquierda y 34 / 62 arriba a la derecha, así que el contorno deja de parecer un rectángulo redondeado.
Cada esquina lleva dos porcentajes porque CSS dibuja la esquina como una elipse: el primer valor es el radio horizontal y el segundo el vertical. La exportación los ordena arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda, primero la fila horizontal y, tras la barra, la vertical.
Un border-radius en porcentaje se resuelve contra la caja del propio elemento, no contra un número fijo de píxeles, así que una misma declaración sirve para un botón ancho y para un avatar pequeño. Los campos de anchura y altura existen para demostrarlo: redimensionan la vista previa, no los radios de la declaración.
El navegador además limita los radios que se solaparían en un borde, por lo que la forma dibujada puede verse menor que los números. El panel de código muestra siempre los valores realmente usados, y por eso los campos se ajustan en cuanto los abandonas.
El código generado es un solo bloque: .rounded-shape con width, height y una línea border-radius en la forma horizontal / vertical. No hay prefijos de proveedor, media queries ni selectores extra, así que basta pegarlo y renombrar la clase.
Todo se ejecuta en la página: los valores y las selecciones no salen del navegador. Copiar CSS copia el bloque y la barra de estado lo confirma, de modo que la regla es segura de preparar antes de llevarla a la hoja de estilos.