Extra pixel after CSS animation in top left corner of DIV

Question

Having trouble diagnosing the cause of the floating pixel in the top left of the div. It only appeared once I added a border-radius.

Looking closely at each corner you can see some fragmenting as it applies the line before applying the radius. Perhaps a different technique all together is required.

CODEPEN

.contest-types { 
	border: 2px solid #BCCED4;
	border-radius: 10px;
	color: #1B2437;
	padding: 10px; 
	margin: 20px; 
	width: 500px; 
  height: 200px;
	background-color: #F9FDFF;
	position: relative;
}

.contest-types:before {
	content: '';
	width: 2px;
	height: 2px;
	background-color: #5697fc;
	position: absolute;
	left: -2px;
	top: -2px;
	display: none;
}

.contest-types:after {
	content: '';
	position: absolute;
	display: block;
	background-color: #5697fc;
}

.contest-types:hover {
	border: 2px solid #5697FC;
	background-color: #FFFFFF;
	animation: border 0.5s ease-out 1;
}


.contest-types:hover:after {
  border-radius: 10px;
	animation: border-after 0.5s ease-in-out 1;
}

.contest-types:hover:before {
	display: block;
}

@keyframes border {
	0%, 24% {
		border-color: #BCCED4;
	}

	25% {
		border-top-color: #5697fc;
	}

	49% {
		border-right-color: #BCCED4;
	}

	50% {
		border-right-color: #5697fc;
	}

	74% {
		border-bottom-color: #BCCED4;
	}

	75% {
		border-bottom-color: #5697fc;
	}

	99% {
		border-left-color: #BCCED4;
	}

	100% {
		border-color: #5697fc;
	}
}

@keyframes border-after {
	0% {
		height: 2px;
		width: 0;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	24.99% {
		width: calc(100% + 2px);
		height: 2px;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	25% {
		width: 2px;
		height: 0;
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	49.99% {
		width: 2px;
		height: calc(100% + 2px);
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	50% {
		width: 0;
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	74.99% {
		width: calc(100% + 2px);
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	75% {
		width: 2px;
		height: 0;
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}

	100% {
		width: 2px;
		height: calc(100% + 2px);
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}
}

      <div class="contest-types" id="group">

      </div>

Answer 1

The issue is that the animation is starting in the top left then changing to the square. You can either move the starting point or use overflow hidden to fix it.

.contest-types { 
    border: 2px solid #BCCED4;
    overflow: hidden;
    border-radius: 10px;
    color: #1B2437;
    padding: 10px; 
    margin: 20px; 
    width: 500px; 
    height: 200px;
    background-color: #F9FDFF;
    position: relative;
}

Answer 2

Use overflow: hidden

.contest-types { 
	border: 2px solid #BCCED4;
	border-radius: 10px;
    overflow: hidden;
	color: #1B2437;
	padding: 10px; 
	margin: 20px; 
	width: 500px; 
  height: 200px;
	background-color: #F9FDFF;
	position: relative;
}

.contest-types:before {
	content: '';
	width: 2px;
	height: 2px;
	background-color: #5697fc;
	position: absolute;
	left: -2px;
	top: -2px;
	display: none;
}

.contest-types:after {
	content: '';
	position: absolute;
	display: block;
	background-color: #5697fc;
}

.contest-types:hover {
	border: 2px solid #5697FC;
	background-color: #FFFFFF;
	animation: border 0.5s ease-out 1;
}


.contest-types:hover:after {
  border-radius: 10px;
	animation: border-after 0.5s ease-in-out 1;
}

.contest-types:hover:before {
	display: block;
}

@keyframes border {
	0%, 24% {
		border-color: #BCCED4;
	}

	25% {
		border-top-color: #5697fc;
	}

	49% {
		border-right-color: #BCCED4;
	}

	50% {
		border-right-color: #5697fc;
	}

	74% {
		border-bottom-color: #BCCED4;
	}

	75% {
		border-bottom-color: #5697fc;
	}

	99% {
		border-left-color: #BCCED4;
	}

	100% {
		border-color: #5697fc;
	}
}

@keyframes border-after {
	0% {
		height: 2px;
		width: 0;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	24.99% {
		width: calc(100% + 2px);
		height: 2px;
		top: -2px;
		left: -2px;
		right: auto;
		bottom: auto;
	}

	25% {
		width: 2px;
		height: 0;
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	49.99% {
		width: 2px;
		height: calc(100% + 2px);
		top: -2px;
		right: -2px;
		left: auto;
		bottom: auto;
	}

	50% {
		width: 0;
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	74.99% {
		width: calc(100% + 2px);
		height: 2px;
		bottom: -2px;
		right: -2px;
		top: auto;
		left: auto;
	}

	75% {
		width: 2px;
		height: 0;
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}

	100% {
		width: 2px;
		height: calc(100% + 2px);
		bottom: -2px;
		left: -2px;
		right: auto;
		top: auto;
	}
}

      <div class="contest-types" id="group">

      </div>