Cómo utilizar el atributo de radio de borde

//border-radius用来实现圆角边框。
div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 20px;
        }

Representaciones:

 

//border-radius设为150px，就会变成圆形边框
//为了方便，直接把border-radius设为50%也行。效果是一样的。但是如果想画圆，则width和height必须要相等
div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 150px;
        }

Representaciones:

De hecho, el radio del borde puede ir seguido de múltiples valores de atributo. Al igual que el valor de atributo anterior, las cuatro esquinas son el valor de atributo de forma predeterminada. Si los cuatro valores de atributo son obviamente opuestos a las cuatro esquinas, ¿qué tal un relativo? ¿método? A partir de la esquina superior izquierda, correspondencia uno a uno en el sentido de las agujas del reloj. 

 div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 50px 0px 20px 100px;
        }

Representaciones: