Atom

Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
En esta ocasión te voy a mostrar como realizar bordes redondeados con 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>
.borde {
background-color: chartreuse;
width: 100px;
height: 100px;
border-style: solid;
border-radius: 5px;
}
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.
Con la propiedad general de border-radius
afectamos a todos los bordes. Puedes utilizar las siguientes propiedades para manejar por separado cada borde:
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:
.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;
}
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.