<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change border radius on hover</title>
</head>

<body>
  <div class="square"></div>
</body>

</html>
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100dvh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.square {
  height: 20em;
  width: 20em;
  background: linear-gradient(45deg, #e42, #d24);
  transition: 0.5s;
  cursor: pointer;
  border-radius: 5em;
  box-shadow: 0px 10px 50px 5px #e42a;
}

.square:hover {
  border-radius: 50%;
  transform: rotate(45deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.