Programming Examples

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


square to circle using CSS

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


CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level Online Test in Hindi Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Sarkari Exam Quiz