How Can I Round The Corners of a square shape when I hover over it?

I'd like to have a hover effect on my color shapes where the corners round as I hover over them. Can you help with this?

you probably will want to dynamically set the styling property "border-radius: n%;"
You can do this with CSS:
 

.your-element-class:hover {
  border-radius: 25%;
}

I would need more context to help further, such as type of element that the shape is. is it a div? and the environment it is in, is it dynamically created with JS or placed upfront, etc.
Additionally you may want:
 

.your-element-class:hover {
  border-radius: 25%;
  pointer-events: auto;
  cursor: pointer;
}