Cómo cambiar la imagen de cuadrada a redonda en un segundo colocando el mouse en el cuadro compuesto de etiquetas div en el front-end web

La imagen que originalmente no era circular se ha transformado en una imagen circular mediante un diseño de estilo CSS. En primer lugar, la imagen debe ser cuadrada.

1. Código fuente HTML completo:

Copiar. El código es el siguiente:

Demostración en línea de diseño circular de imagen DIVCSS5.

2. Código CSS correspondiente:

Copia el código de la siguiente manera:

#divcss5{ margin: 10px auto}.

#divcss5 img{ radio-borde: 50}.

Nombre el cuadro "id=divcss5", centre el cuadro y tenga un espacio superior e inferior de 10 píxeles; luego configure la imagen img en el cuadro del objeto en esquinas redondeadas 50.