Bordes redondeados (border-radius)
La propiedad border-radius permite crear esquinas redondeadas. Especificamos en píxeles u otra medida el radio de redondeo de la o las esquinas.
Podemos indicar un único valor que se asignará a los cuatro vértices:
#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
También podemos indicar el redondeo de cada vértice en forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda):
#recuadro2{
border-radius: 20px 40px 60px 80px;
background-color:#aa0;
width:200px;
padding:10px;
margin-top:10px;
}
