Generador de border-radius CSS

Arrastra los ocho controles — cada esquina tiene un eje horizontal (h) y un eje vertical (v) — y observa cómo la vista previa se redondea, se elipsa, se hace hoja, blob o pastilla. Empieza por una de las doce formas predeterminadas. El resultado de abajo se reduce a la forma CSS correcta más corta: una esquina recta no emite nada y un círculo perfecto emite solo 50%. 100% en el navegador, sin subir nada.

Vista previa

Arrastra los controles o elige una forma predeterminada

Formas predeterminadas

Esquinas (h = horizontal, v = vertical)

Superior izquierda h 0% v 0%

Superior derecha h 0% v 0%

Inferior derecha h 0% v 0%

Inferior izquierda h 0% v 0%

Vincular esquinas opuestas (arrastra una y la opuesta la sigue) Vincular todas las esquinas (arrastra una y las cuatro la siguen)

CSS

Forma corta

Forma larga (8 valores)

Por esquina

Selector personalizado

Escribe un valor CSS (anula los controles)

Acepta la forma corta de 1, 2, 3 o 4 valores, con una forma de elipse opcional con /. Se admiten las unidades px y %.