.wrap {
	width:840px;
	margin:50px auto;
	height:300px;
}
.wrap a {
	float:left;
	width:180px;
	height:180px;
	margin:10px;
	border:2px solid #ccc;
	position:relative;
}
.wrap a .top {
	display:inline-block;
	position:absolute;
	left:-1px;
	top:-2px;
	width:0px;
	height:2px;
	background:#ff0000;
	transition:.5s
}
.wrap a .right {
	display:inline-block;
	position:absolute;
	right:-1px;
	bottom:0;
	width:2px;
	height:0px;
	background:#ff0000;
	transition:.5s
}
.wrap a .bottom {
	display:inline-block;
	position:absolute;
	bottom:-1px;
	right:-1px;
	width:0px;
	height:2px;
	background:#ff0000;
	transition:.5s
}
.wrap a .left {
	display:inline-block;
	position:absolute;
	left:-1px;
	top:0;
	width:2px;
	height:0px;
	background:#ff0000;
	transition:.5s
}
.wrap a:hover .top,.wrap a:hover .bottom {
	width:101%;
	transition:.5s;
}
.wrap a:hover .right,.wrap a:hover .left {
	height:100%;
	transition:.5s;
}