Compenser Rayon frontière Dessin de Safari

Question

Observez l'exemple ci-dessous simple:

div { 
 
    border-bottom: 1px solid black; 
 
    border-radius: 20%; 
 
    padding: 10px; 
 
}

<div>Test</div>

Dans Safari, cela provoque une partie des frontières supérieures à tirer:

Je don Je ne veux pas de ces frontières supérieures "fantômes". Comment puis-je compenser cela?

Answer 1

Vous devez supprimer la bordure arrondie sur le dessus de votre div comme ceci:

div { 
    border-bottom: 1px solid black; 
    border-radius: 0 0 20% 20%; 
    padding: 10px; 
} 

Ce utilise le raccourci border-radius avec 4 valeurs où

première valeur se de page- gauche, la deuxième valeur s'applique en haut à droite, la troisième valeur s'applique en bas à droite, et la quatrième valeur s'applique à coin en bas à gauche "

https://www.w3schools.com/cssref/css3_pr_border-radius.asp