Generador de border-radius
Redondee las cuatro esquinas a la vez o cada una por separado, y copie la línea de border-radius.
CSS
Crear esquinas redondeadas con CSS
Las esquinas redondeadas suavizan tarjetas, botones, avatares e imágenes. Esta página abre el Generador CSS en su pestaña de radio de borde, donde puede redondear todas las esquinas juntas o dar forma a cada una.
Ejemplos
| CSS | Forma |
|---|---|
border-radius: 8px; | Tarjeta o botón ligeramente redondeado |
border-radius: 50%; | Círculo a partir de un cuadrado, como un avatar |
border-radius: 999px; | Botón o etiqueta en forma de píldora |
border-radius: 24px 24px 0px 0px; | Solo las esquinas superiores redondeadas, como en un panel inferior |
Píxeles o porcentaje
Los valores en píxeles mantienen la misma curva sea cual sea el tamaño del elemento, lo que va bien para botones y tarjetas. Los valores en porcentaje crecen con el elemento, y cada esquina se mide por separado respecto a su ancho y su alto, así que en un rectángulo la curva se vuelve elíptica.
Herramientas relacionadas
Para añadir una sombra al elemento redondeado, vea el generador de box-shadow. Para un relleno degradado, vea el generador de degradados CSS.