JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="#" class="with-radius">Link 1: the culprit (hover on and off this a bunch of times)</a>
<a href="#" class="no-radius">Link 2: no border-radius</a>
<a href="#" class="with-radius border-set">Link 3: transparent border set</a>
</body>
</html>

CSS

a{
    text-decoration:none;
    padding:10px;
    margin:40px;
    display:block;
}
a.border-set{
    border:1px solid transparent;
}
a.no-radius:hover{
    background:blue;
}
a.with-radius:hover{
    background:red;
    border-radius:5px;
}