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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
I have added a picture since this only seems to happen on Safari...
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>