Image outline shows as square on Safari [duplicate] - html

Question

I'm trying to get a round button which has a an outline in the same color but that doesn't seem to be possible. The outline always ends up squared. Is there a method to achieve that with a or does it maybe only work with a ?
button {
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
outline: 5px solid black;
outline-offset: 5px;
}
<button></button>
I have added a picture since this only seems to happen on Safari...Screenshot from Safari snippet
I need it to work in all browsers especially on mobile though.

Answer 1

You can use this "hack".
INFO: In Brave Browser we got a square too with your snippet;
button {
position: relative;
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
margin:10px 2px;
}
button::after {
position: absolute;
top: -10px;
content: '';
left: -10px;
width: 50px;
height: 50px;
border: 5px solid black;
border-radius: 40px;
background-color: transparent;
display: inherit;
}
<button></button>

Answer 2

Safari fixed this bug on Safari Technology Preview 157. Source: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/

Answer 3

According to your question and code snippet that you have provided. From my browser when I ran both the button and the outline was Circle.
I would suggest you to clear your cache and run the code again OR try changing the browser.
Or please update your question with a screenshot as well, so that we can understand better.