Border Radius

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 40 de 76.

En CSS, la propiedad border-radius se utiliza para crear esquinas redondeadas para un elemento. Esta propiedad le permite especificar el radio de la curvatura para cada esquina, dándole control sobre la forma del borde del elemento. Aquí está la sintaxis básica para usar la propiedad border-radius:

selector {
    border-radius: value;
}

value: El radio deseado para las esquinas redondeadas, que se puede especificar en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

Puedes especificar un único valor para aplicar el mismo radio a las cuatro esquinas. En el siguiente ejemplo, todos los elementos <div> tendrán esquinas redondeadas con un radio de 10px.

div {
    border-radius: 10px;
}

Puedes establecer los diferentes valores para cada esquina individualmente, utilizando el siguiente orden: superior izquierda, superior derecha, inferior derecha, inferior izquierda.

.button {
    border-radius: 10px 20px 30px 40px;
}

También puedes especificar solo dos valores: el primer valor se aplicará a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplicará a las esquinas superior derecha e inferior izquierda.

img {
    border-radius: 20px 50px;
}

Desafío

Fácil

Se te proporciona un documento HTML con dos elementos <div>, cada uno con las clases "one" y "two". Sigue los pasos a continuación:

Escribe una regla CSS usando un selector de clase para seleccionar todos los elementos con la clase “one”. Establece el border en 3px solid #4287f5 y el border-radius en 15px para dar a todas las esquinas la misma forma redondeada.
Escribe una regla CSS usando un selector de clase para seleccionar todos los elementos con la clase “two”. Establece el border en cualquier valor y el border-radius en cualquier valor de tu elección.

Hoja de referencia

La propiedad border-radius crea esquinas redondeadas para los elementos:

selector {
    border-radius: value;
}

Los valores se pueden especificar en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

Un solo valor: aplica el mismo radio a todas las esquinas:

div {
    border-radius: 10px;
}

Cuatro valores: esquinas individuales (superior izquierda, superior derecha, inferior derecha, inferior izquierda):

.button {
    border-radius: 10px 20px 30px 40px;
}

Dos valores: el primero se aplica a la esquina superior izquierda e inferior derecha, el segundo a la superior derecha e inferior izquierda:

img {
    border-radius: 20px 50px;
}

Pruébalo tú mismo

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>