Bordes redondeados con border-radius - Curso de CSS3 básico - Capítulo 8

En esta ocasión te voy a mostrar como realizar bordes redondeados con la propiedad CSS border-radius.

La propiedad CSS border-radius

Empecemos añadiendo a un borde la propiedad border-radius con 25 px. A un <div>.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ubicación de las propiedades de CSS</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div class="borde"></div>
</body>
</html>

CSS 

.borde {
    background-color: chartreuse;
    width: 100px;
    height: 100px;
    border-style: solid;
    border-radius: 5px;
}
border radius css

Lo que nos queda, es un borde con las esquinas redondeadas. A cuantos más píxeles le pongas a la propiedad border-radius más redondeados estarán.

Estilos border-radius para cada lado del borde

Con la propiedad general de border-radius afectamos a todos los bordes. Puedes utilizar las siguientes propiedades para manejar por separado cada borde:

CSS

Puedes utilizar una de las dos formas para cada lado.

.borde {
    background-color: chartreuse;
    width: 100px;
    height: 100px;
    border-style: solid;

    /* Borde superior izquierdo */
    border-top-left-radius: 10px;
    border-start-start-radius: 10px;

    /* Borde superior derecho */
    border-top-right-radius: 10px;
    border-start-end-radius: 10px;

    /* Borde inferior izquierdo */
    border-bottom-left-radius: 10px;
    border-end-start-radius: 10px;

    /* Borde inferior derecho */
    border-bottom-right-radius: 10px;
    border-end-end-radius: 10px;
}

Veamos un ejemplo con bordes muy diferentes unos de otros:

CSS 

.borde {
    background-color: chartreuse;
    width: 100px;
    height: 100px;
    border-style: solid;

    /* Borde superior izquierdo */
    border-top-left-radius: 25px;

     /* Borde superior derecho */
     border-top-right-radius: 4px;

    /* Borde inferior izquierdo */
    border-bottom-left-radius: 15px;

    /* Borde inferior derecho */
    border-bottom-right-radius: 50px;
}
border radius css

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.