I'm trying to get a round button with the same color outline, but it doesn't seem possible. The outline always ends up being square. Is there a way to achieve this with a , or maybe it can only be achieved 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've added a picture because this only seems to happen on Safari...Screenshot from Safari snippet
I need it to work in all browsers, especially on mobile devices.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Safari This bug is fixed in Safari Technical Preview 157. Source: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
You can use this "hack".
Information: In the Brave browser, your snippet also appears as a square;
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; }