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 Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Online Exam Quiz O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Best Website and Software Company in Allahabad Website development Company in Allahabad