Css code to change the square into circle when mouse is over to the square shape

Write a CSS Code which change the Shape of Square into Circle when User Move the mouse over square.

Solution

<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">
			.circle{
				width:200px;
				height:200px;				
				background:red;
				border:2px double black;				
			}
			.circle:hover{
				background:yellow;
				border-radius:50%;
			}
		</style>
	</head>
	<body>
		<div class="circle"></div>
	</body>
</html>

Output

Programming Examples

Css code to change the square into circle when mouse is over to the square shape