Como redondeo solo las esquinas superiores?

Ajusta los controles deslizantes superior izquierdo y superior derecho al radio que quieras y deja los dos inferiores en cero. La vista previa se actualiza mientras arrastras, y el CSS copiado mantiene las esquinas inferiores rectas.

Que CSS me da la herramienta?

Genera una regla border-radius lista para usar con los cuatro valores de esquina en orden: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Pegala directamente en tu hoja de estilos.

Se suben mis ajustes a algun sitio?

No. La vista previa y el CSS se generan por completo en tu navegador, asi que no se envia nada a un servidor. No hay subida ni registro.

Generador de Border Radius CSS

Arriba izquierda: 16px

Arriba derecha: 16px

Abajo derecha: 16px

Abajo izquierda: 16px

CSS

.element {
  border-radius: 16px 16px 16px 16px;
}

Que hace esta herramienta

Esta herramienta te permite dar forma a las esquinas redondeadas a ojo y te entrega el valor CSS border-radius correspondiente. Arrastras un control deslizante para cada una de las cuatro esquinas y una caja de vista previa en vivo se actualiza en tiempo real, de modo que puedes ver exactamente como queda la forma antes de decidirte. Ayuda a los desarrolladores front-end que quieren un valor preciso sin prueba y error, a los disenadores que crean el estilo de un componente y a cualquiera que este aprendiendo como border-radius controla las curvas de las esquinas.

Como cada esquina tiene su propio control deslizante, no te limitas a un redondeo uniforme. Puedes redondear solo la parte superior, crear una forma de pildora o curvar una sola esquina para una pestana o una tarjeta.

Como usarla

Arrastra el control deslizante superior izquierdo para fijar la curva de la esquina superior izquierda.
Arrastra el control deslizante superior derecho para la esquina superior derecha.
Arrastra el control deslizante inferior derecho para la esquina inferior derecha.
Arrastra el control deslizante inferior izquierdo para la esquina inferior izquierda.
Observa como la vista previa se actualiza con cada cambio hasta que la forma se vea bien.
Copia la regla CSS border-radius generada y pegala en tu hoja de estilos.

Un ejemplo rapido

Para hacer una tarjeta con la parte superior redondeada y la base plana, sube los controles superior izquierdo y superior derecho al mismo valor y manten el inferior izquierdo y el inferior derecho en cero. La vista previa muestra una forma similar a una pestana, y la regla copiada se lee algo como border-radius: 16px 16px 0 0;. Un error comun es olvidar que los valores van en sentido horario desde la esquina superior izquierda, asi que revisa la vista previa si una esquina se curva donde no lo esperabas.

Funciona por completo en tu navegador, mantiene tu trabajo privado, es totalmente gratis y no necesita registro.

Preguntas frecuentes

Como redondeo solo las esquinas superiores?: Ajusta los controles deslizantes superior izquierdo y superior derecho al radio que quieras y deja los dos inferiores en cero. La vista previa se actualiza mientras arrastras, y el CSS copiado mantiene las esquinas inferiores rectas.
Que CSS me da la herramienta?: Genera una regla border-radius lista para usar con los cuatro valores de esquina en orden: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Pegala directamente en tu hoja de estilos.
Se suben mis ajustes a algun sitio?: No. La vista previa y el CSS se generan por completo en tu navegador, asi que no se envia nada a un servidor. No hay subida ni registro.