Rotating Border Tile

by Saksham Malhotra

HTML

<div class="tile">
		<div class="tileInner">
		</div>
	</div>

CSS

.tile, .tileInner {
	height:200px;
	width:200px;
	position:relative;
	margin:0 auto;
	cursor:pointer;
}
.tile {
	background-color:#eee;
}
.tile:before, .tile:after, .tileInner:before, .tileInner:after {
	content:'';
	position:absolute;
	transition: all 0.3s ease;
}
.tile:before, .tile:after {
	height:5px;
	width:100%;
	background-color:#3583C5;
}
.tile:hover:before, .tile:hover:after {
	width:0%;
}
.tileInner:before, .tileInner:after {
	height:0%;
	width:5px;
	background-color:#3583C5;
}
.tileInner:hover:before, .tileInner:hover:after {
	height:100%;
}
.tile:before {
	left:0;
	top:0;
}
.tileInner:before {
	left:0;
	top:0;
}
.tile:after {
	right:0;
	bottom:0;
}
.tileInner:after {
	right:0;
	bottom:0;
}