Comment obtenir un contour circulaire sur un <bouton> circulaire en utilisant CSS dans Safari

Question

J'essaie d'obtenir un bouton rond avec le contour de la même couleur mais cela ne semble pas possible. Le contour finit toujours par être carré. Existe-t-il un moyen d'y parvenir avec un , ou peut-être que cela ne peut être réalisé qu'avec un ?

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>

J'ai ajouté une photo car cela ne semble se produire que sur Safari... Capture d'écran de l'extrait de Safari

J'en ai besoin pour fonctionner dans tous les navigateurs, en particulier sur les appareils mobiles.

Answer 1

Safari Ce bug est corrigé dans Safari Technology Preview 157. Source : https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/

Answer 2

Vous pouvez utiliser ce "hack".

Information : Dans le navigateur Brave, votre extrait apparaît également sous forme de carré ;

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;
}