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

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>