transform scale border hover css with bootstrap 4

I want to zoom in on that link by hovering over the link. like this demo.

But this is the first square, and when you place the mouse on it, it turns into a circle.

I'm trying to zoom an border on mouse over using transform: scale() function but if the border has a border then it gets pixelated when scaled. Here is a sample of the same element with the same CSS rules applied.

HTML

<div class="collapse navbar-collapse" id="navbarLogo">
	<ul class="navbar-nav mr-auto">
		<li class="nav-item active">
			<a class="nav-link" href="#">
				<i class="fas fa-th-large fa-2x"></i>
				<span>Home</span>
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">
				<i class="fas fa-cube"></i>
				<span>Contact</span>
			</a>
		</li>
	</ul>
</div>

CSS

.navbar {
	padding: 0 1rem;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
	background-color: rgba(160,0,180,.5);
}

ul.navbar-nav > li > a {
	padding: 60px 0 16px;
	display: block;
	text-align: center;
	position: relative;
	min-width: 110px;
}

ul.navbar-nav > li > a > i {
	content: '';
	position: absolute;
	display: inline-block;
	width: 50%;
	height: 50%;
	top: 10px;
	padding-top: 10px;
	left: 0;
	font-size: 25px;
	right: 0;
	margin: 0 auto;
}
/**/
ul.navbar-nav > li.active > a > i {
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
}

ul.navbar-nav > li > a > i:hover {
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	transform: scale(1);
}

ul.navbar-nav > li > a > span{
	font-size: 13px;
}