Ejemplo para Crear Bordes Redondeados en CSS

Los bordes redondeados son un efecto muy utilizado en diseño web para suavizar el aspecto de elementos, dándoles una apariencia más amigable y moderna. En CSS, puedes aplicar bordes redondeados fácilmente usando la propiedad border-radius. A continuación, aprenderemos cómo crear bordes redondeados en diferentes tipos de elementos y cómo personalizarlos para obtener los efectos deseados.

¿Qué es `border-radius`?

La propiedad border-radius en CSS permite modificar las esquinas de un elemento para que no sean rectas sino redondeadas. Esta propiedad se puede aplicar a cualquier elemento que tenga bordes definidos, como div, button, img, entre otros.

Sintaxis Básica

La sintaxis de border-radius es muy sencilla:

css
selector {
    border-radius: valor;
}

Valor: Es la medida que determina el grado de redondez de las esquinas. Puede ser en píxeles (px), porcentajes (%), u otras unidades de medida de CSS. Mientras más alto sea el valor, más redondeadas serán las esquinas.

Ejemplos Prácticos de Bordes Redondeados

1. Redondeo Uniforme

Para aplicar un redondeo uniforme a todas las esquinas de un elemento, se puede utilizar un solo valor en border-radius.

css
.caja-redonda {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    border-radius: 20px; /* Redondeo de 20px en todas las esquinas */
}

HTML

html
<div class="caja-redonda"></div>

Resultado:

Este código crea un cuadrado de color verde de 200x200 píxeles, con todas sus esquinas redondeadas a 20 píxeles.

2. Crear Bordes Redondeados al 100% para un Círculo

Cuando se quiere hacer un círculo perfecto (por ejemplo, para imágenes de perfil), puedes aplicar border-radius al 50%.

css
.circulo {
    width: 150px;
    height: 150px;
    background-color: #2196F3;
    border-radius: 50%; /* Convierte el elemento en un círculo */
}

HTML

html
<div class="circulo"></div>

Resultado:

Este elemento es un círculo azul de 150x150 píxeles.

3. Redondear Esquinas Individuales

CSS también permite redondear esquinas específicas usando propiedades individuales para cada esquina:

css
.esquinas-individuales {
    width: 250px;
    height: 150px;
    background-color: #FF5722;
    border-top-left-radius: 20px;   /* Esquina superior izquierda */
    border-top-right-radius: 50px;  /* Esquina superior derecha */
    border-bottom-left-radius: 10px; /* Esquina inferior izquierda */
    border-bottom-right-radius: 30px; /* Esquina inferior derecha */
}

HTML

html
<div class="esquinas-individuales"></div>

Resultado:

Este código aplicará diferentes niveles de redondeo en cada esquina, creando un diseño personalizado.

4. Bordes Redondeados con Valores de Eje X e Y

Es posible personalizar el redondeo en cada eje para obtener esquinas más ovaladas:

css
.ovalo {
    width: 250px;
    height: 150px;
    background-color: #9C27B0;
    border-radius: 50px 25px; /* 50px en el eje X, 25px en el eje Y */
}

HTML

html
<div class="ovalo"></div>

Resultado:

Este código aplica un borde ovalado, donde las esquinas son más redondeadas en el eje horizontal (X) que en el vertical (Y).

5. Aplicar Bordes Redondeados a Imágenes

Redondear imágenes sigue el mismo principio. Esto es útil para crear imágenes de perfil circulares o con bordes suaves.

css
.imagen-redondeada {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Convierte la imagen en un círculo */
}

HTML

html
<img src="imagen.jpg" alt="Perfil" class="imagen-redondeada">

Resultado:

La imagen se muestra en forma de círculo.

Consejos y Buenas Prácticas

Usa porcentajes: El valor border-radius: 50% es muy útil para hacer elementos completamente circulares.
Cuidado con la compatibilidad: border-radius es compatible con la mayoría de los navegadores modernos, pero siempre es recomendable probar el diseño en varios navegadores.
Ajusta el redondeo según el diseño: Algunos elementos se ven mejor con esquinas más suaves, mientras que otros necesitan bordes completamente circulares. Experimenta con diferentes valores.

Ejemplo Final

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Bordes Redondeados en CSS</title>
    <style>
        .caja-redonda {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            border-radius: 20px;
        }
        .circulo {
            width: 150px;
            height: 150px;
            background-color: #2196F3;
            border-radius: 50%;
        }
        .esquinas-individuales {
            width: 250px;
            height: 150px;
            background-color: #FF5722;
            border-top-left-radius: 20px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 30px;
        }
        .ovalo {
            width: 250px;
            height: 150px;
            background-color: #9C27B0;
            border-radius: 50px 25px;
        }
    </style>
</head>
<body>

<h2>Ejemplo de Bordes Redondeados en CSS</h2>

<div class="caja-redonda"></div>
<div class="circulo"></div>
<div class="esquinas-individuales"></div>
<div class="ovalo"></div>

</body>
</html>

Este ejemplo te ayudará a aplicar bordes redondeados en tus proyectos de manera efectiva, aportando un toque de estilo a tus elementos visuales en CSS. ¡Pruébalo y experimenta con diferentes valores para lograr el diseño perfecto!

Buscar este blog

Vía Electrónica