border-radius: 16px;El generador de radio de borde CSS es un editor visual para la propiedad CSS Border-Radius. Arrastra un control deslizante para cada esquina, mira una ronda de elementos de vista previa en tiempo real y copia el CSS exacto que produce, sin adivinar valores de píxeles y recargar la página.
La propiedad Border-Radius parece simple pero tiene una abreviatura compacta que hace que la gente haga tropezar a las personas: un valor redondea las cuatro esquinas, dos valores establecen las dos diagonales y cuatro valores se ejecutan en el sentido de las agujas del reloj desde la parte superior izquierda. Esta herramienta le permite configurar cada esquina de forma independiente y luego genera la abreviatura equivalente más corta automáticamente, de modo que su CSS se mantenga limpio.
Todo se ejecuta en su navegador. Comience desde una tarjeta, pastilla, círculo o blob preestablecida, ajuste cada esquina, cambie la unidad entre píxeles y porcentajes y copie la declaración. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.
Elija un preset como redondeado, pastilla, círculo o blob para un punto de partida instantáneo, o comience desde las esquinas redondeadas predeterminadas.
Arrastre los deslizadores superior izquierdo, superior derecho, inferior derecho e inferior izquierdo para redondear cada esquina de forma independiente, o configure todas en el mismo valor para un radio uniforme.
Cambie entre px, %, EM y REM. Los porcentajes crean esquinas elípticas en relación con el tamaño del elemento: establezca un 50% en todas las esquinas para crear un círculo o una elipse perfecto.
Copie la declaración de radio de borde generada, ya colapsada a la abreviatura válida más corta, y péguela en su hoja de estilo.
Los controles deslizantes independientes para las cuatro esquinas le permiten crear formas asimétricas como hojas, pestañas y radios de burbuja de voz, no solo de un redondeado uniforme
La herramienta contrae automáticamente sus cuatro esquinas a la abreviatura de radio de borde equivalente más corta, manteniendo su CSS limpio y legible
Cambiar entre px, %, EM y REM: los porcentajes producen esquinas elípticas en relación con el tamaño de la caja, que es cómo se hacen los círculos y los blobs
Un elemento de vista previa se actualiza al instante mientras arrastras, para que puedas ver exactamente cómo se redondean las esquinas antes de copiar cualquier cosa.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!