Cómo Redondear Bordes con CSS: Guía

Para redondear bordes con CSS se usa la propiedad border-radius. Con un solo valor (por ejemplo, border-radius: 10px) redondeas las cuatro esquinas; con cuatro valores controlas cada esquina por separado, y con border-radius: 50% un elemento cuadrado se convierte en un círculo.

El diseño web moderno busca suavidad y fluidez en la interfaz de usuario. Una de las técnicas más utilizadas es redondear bordes con CSS, lo que permite dar un aspecto más atractivo y moderno a botones, imágenes, contenedores y otros elementos HTML.

En este artículo, te enseñaremos cómo usar border-radius en CSS para redondear bordes de forma sencilla y efectiva.

1. La Propiedad border-radius

La propiedad CSS principal para redondear bordes es border-radius. Su sintaxis básica es:

.elemento {
    border-radius: 10px;
}

Esto aplicará un radio de 10px a todas las esquinas del elemento.

Ejemplo en HTML:

<div class="elemento">Texto con bordes redondeados</div>

1.1 Aplicar Diferentes Radios a Cada Esquina

Si deseas redondear cada esquina con un valor diferente, puedes especificarlos en el siguiente orden:

.elemento {
    border-radius: 10px 20px 30px 40px; /* superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda */
}

Ejemplo en HTML:

<div class="elemento">Esquinas con diferentes radios</div>

Si solo quieres redondear una esquina, también puedes usar su propiedad individual:

.elemento {
    border-top-left-radius: 20px;     /* superior izquierda */
    border-bottom-right-radius: 20px; /* inferior derecha */
}

Las cuatro propiedades son border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.

1.2 Usando Porcentajes

Puedes usar porcentajes en lugar de píxeles. El porcentaje se calcula sobre el tamaño del propio elemento: el radio horizontal respecto a su ancho y el vertical respecto a su alto.

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Con border-radius: 50% un elemento cuadrado (mismo ancho y alto) se convierte en un círculo. Si el elemento es rectangular, el resultado es una elipse, no un círculo. Para un botón con forma de píldora en un elemento rectangular, usa un valor grande en píxeles, por ejemplo border-radius: 9999px.

Ejemplo en HTML:

<img src="imagen.jpg" class="avatar" alt="Imagen redonda">

Generador visual de bordes redondeados

Si prefieres ajustar los valores de forma visual en lugar de escribirlos a mano, usa la pestaña Bordes redondeados de nuestras herramientas CSS gratis: puedes aplicar el mismo radio a las cuatro esquinas o ajustar cada una por separado, ver el resultado en vivo y copiar el código border-radius con un clic.

2. Redondear Bordes de Imágenes con CSS

Para aplicar bordes redondeados a imágenes, simplemente usa la propiedad border-radius en una etiqueta img:

img {
    border-radius: 15px;
}

Ejemplo en HTML:

<img src="imagen.jpg" alt="Imagen con bordes redondeados">

Avatar circular — si quieres que la imagen sea completamente redonda:

img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

Tarjeta con imagen y esquinas redondeadas

Cuando una tarjeta tiene una imagen dentro, la imagen no respeta las esquinas del contenedor a menos que este recorte lo que sobresale con overflow: hidden:

.tarjeta {
    border-radius: 12px;
    overflow: hidden; /* recorta la imagen para que respete las esquinas */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tarjeta img {
    display: block;
    width: 100%;
}

<div class="tarjeta">
    <img src="foto.jpg" alt="Descripción de la foto">
    <p>Texto de la tarjeta</p>
</div>

3. Crear Bordes Redondeados en Botones

Los botones con esquinas redondeadas mejoran la experiencia del usuario. Puedes lograrlo así:

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

Ejemplo en HTML:

<button>Botón Redondeado</button>

Botón Redondeado

4. Bordes Redondeados con Sombras

Para darle más profundidad a un elemento con bordes redondeados, puedes combinar border-radius con box-shadow:

.caja {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

Ejemplo en HTML:

<div class="caja">Caja con sombra</div>

5. Redondear Bordes con clip-path

Otra opción es clip-path, que recorta el elemento (incluido su contenido y su fondo). Para redondear esquinas con clip-path se usa inset() con round:

.elemento {
    clip-path: inset(0 round 20px);
}

Ten en cuenta que clip-path recorta también las sombras (box-shadow), así que para el caso habitual border-radius sigue siendo la opción más sencilla. Con otras funciones, como ellipse(), no redondeas esquinas sino que recortas el elemento con forma de óvalo.

Ejemplo en HTML:

<div class="elemento-ovalado">Recorte ovalado con ellipse()</div>

6. Consejos y Mejores Prácticas

• Usa border-radius: 50% para crear elementos circulares.
• Combínalo con box-shadow para mejorar el diseño.
• Evita exagerar los valores para mantener un diseño equilibrado.
• Si trabajas con imágenes, usa object-fit: cover; para evitar distorsiones.

Preguntas frecuentes

¿Cómo redondeo solo una esquina?

Usa la propiedad individual de esa esquina, por ejemplo border-top-left-radius: 20px;, o la forma abreviada con cuatro valores poniendo 0 en las demás: border-radius: 20px 0 0 0; (el orden es superior izquierda, superior derecha, inferior derecha e inferior izquierda).

¿Por qué border-radius: 50% no me da un círculo?

Porque el elemento no es cuadrado. El porcentaje se calcula sobre el ancho y el alto, así que en un rectángulo 50% produce una elipse. Dale el mismo ancho y alto para obtener un círculo.

¿Por qué la imagen se sale de las esquinas redondeadas del contenedor?

Porque el contenedor no recorta su contenido. Añade overflow: hidden al contenedor, o aplica también border-radius a la imagen.

¿Necesito jQuery para redondear bordes?

No. border-radius es una propiedad de CSS y no necesita JavaScript ni librerías.

¿Qué diferencia hay entre usar px y % en border-radius?

Con píxeles el radio es fijo, sea cual sea el tamaño del elemento. Con porcentajes el radio se calcula sobre el tamaño del elemento (horizontal sobre el ancho y vertical sobre el alto), así que cambia si el elemento cambia de tamaño.

Conclusión

Redondear bordes con CSS es una técnica sencilla pero efectiva para mejorar la apariencia de tu web. Con la propiedad border-radius, puedes transformar imágenes, botones y contenedores, logrando un diseño moderno y atractivo.

¡Experimenta con los diferentes valores y descubre cómo mejorar la experiencia de usuario en tu sitio web!