¿Hay alguna manera de hacer que la animación alrededor de un número corresponda a la cantidad del número? Como el número 5 en esta imagen:

¿Te refieres a algo como esto? Introduzca un número por encima de 5 para aguamarina y por debajo de 5 para naranja.
document.getElementById('applyNum').addEventListener('click', function() { document.getElementById('numCon').innerHTML = document.getElementById('numInput').value; const v = document.getElementById('numCon').innerHTML; if (v >= 5) { document.getElementById('numCon').style.borderLeft = '2px solid aqua'; document.getElementById('numCon').style.borderBottom = '2px solid aqua'; } else if (v < 5) { document.getElementById('numCon').style.borderLeft = '2px solid orange'; document.getElementById('numCon').style.borderBottom = '2px solid orange'; } }) #numCon { display: flex; justify-content: center; align-items: center; position: absolute; top: 25%; left: 5%; width: 50px; height: 50px; font-size: 5vw; border-radius: 50%; } <input id='numInput' /> <button id='applyNum'>Apply Number</button> <div id="numCon"></div>