CSS Shapes Border-radius

Hola! Hoy les voy a enseñar como hacer bordes redondeados con CSS, para ello necesitan la propiedad "Border-radius"
 Si ustedes quieren hacer un círculo (por ejemplo) de 100 píxeles de diámetro, primero tienen que hacer un cuadrado de 100 píxeles de diámetro!
Así:
<style>
.circulo {
   width: 100px;
   height: 100px;
   background-color: black;
}
</style>

Y después le tienen que decir que los bordes estén redondeados, así:

<style>
.circulo {
   width: 150px;
   height: 100px;
   background-color: black;
   border-radius: 50px;
}
</style>

Listo! Pero, por qué en "border-radius" puse "50px"? Por que tiene que ser la mitad de la longitud del diámetro!!!
Y si querés hacer un óvalo? Le agrandas la "width" a 150!!!

<style>
.ovalo {
   width: 150px;
   height: 100px;
   background-color: black;
   border-radius: 50px;
}
</style>

Y si querés que cada borde sea distinto? Fácil, le agregas distintas medidas:

<style>
.bordesdistintos {
   width: 150px;
   height: 100px;
   background-color: black;
   border-radius: 50px 10px 40px 30px;
}
</style>

Eso fue todo por hoy! Gracias por leer, ojalá lo hayan entendido!
Tengan un recagorrigodía