Окружность вокруг div при наведении курсора

1,00
р.
У меня есть div в форме солнца. Я просто хочу показать границу при наведении, с прозрачным промежутком между объектом и границей.

Сначала я пробовал box shadow, но не мог сделать белый пробел. Он требует сплошного цвета. Затем я попытался таким образом, как в коде ниже, но пробел не появляется.
Здесь мой код:


.sun-quote-pages{
border-radius: 50%
background-color: #f4953b
width: 4.1em
height: 4.1em
border: 2px solid transparent
transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease
}

.sun-quote-pages:hover {
transform: scale(1.3)
border: 2px solid #f4953b
margin: 2px
padding: 2px
}


.wrapper{
margin-left:150px
margin-top:50px
}





Что мне здесь не хватает?
Jsfiddle
Свободный перевод вопроса Circle around div when hover от участника @Janath.

Ответ
Решением является background-clip, которое можно найти здесь:
https://css-tricks.com/transparent-borders-with-background-clip/
С его помощью вы можете помешать цвет фона под border и padding. Это свойство широко поддерживается:
https://caniuse.com/#search=background-clip


.sun-quote-pages{
border-radius: 50%
background-color: #f4953b
width: 4.1em
height: 4.1em
padding: 2px
border: 2px solid transparent
background-clip: content-box
transition: transform 0.5s ease, border 0.5s ease
}

.sun-quote-pages:hover {
border: 2px solid #f4953b
transform: scale(1.3)
}


.wrapper{
margin-left:150px
margin-top:50px
}





Live Demo
Или вариант с двойной границей:


.sun-quote-pages{
border-radius: 50%
background-color: #f4953b
width: 4.1em
height: 4.1em
padding: 2px
border: 6px double transparent
background-clip: content-box
transition: transform 0.5s ease, border 0.5s ease
}

.sun-quote-pages:hover {
border: 6px double #f4953b
transform: scale(1.3)
}


.wrapper{
margin-left:150px
margin-top:50px
}





Live Demo
Свободный перевод ответа Circle around div when hover от участника @KIKO Software.