[Résolu] Petit défaut avec border radius

Bonjour,

Pour un message contextuel assez simple je me retrouve avec un code CSS assez compliqué.

Voir le codepen.

Mon problème concerne la création de la bordure du DIV parent et des p enfants.

Le résultat semble bien mais si vous grossissez beaucoup vous verrez dans les coins hauts à gauche et à droite une légère courbe blanche à la place du fond rouge uni.
Elle apparaît sur Chrome comme sur Firefox, je me demande s'il n'y a pas une erreur dans la création des bordures et des border-radius.

Le défaut est presque invisible mais voyez-vous des erreurs dans le CSS ?
Modifié par boteha_2 (31 Jul 2024 - 20:12)

Bonsoir,

Le plus simple est de mettre un overflow:hidden sur le parent arrondi et ne pas définir d'arrondi sur l'enfant.

Autre possibilités approximatives,
- mettre un border-radius avec une valeur inférieur de 1 à quelques px sur l'enfant de façon à élargir sa courbe et mieux remplir la courbe intérieur du parent.
- ou dessiner la bordure via box-shadow: inset 0 0 0 1px rouge par exemple s'il n'y a pas de padding et des couleurs similaires à superposer.

C'est un défaut(ou pas) connu d'affichage .
Il faut juste l'éviter ou le compenser si l'on ne veut pas le voir.

cdt
Modifié par gcyrillus (31 Jul 2024 - 20:55)

Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
Le plus simple est de mettre un overflow:hidden sur le parent arrondi et ne pas définir d'arrondi sur l'enfant.

C'est ce que j'ai fait dans le codepen et cela semble parfaitement marcher.

J'attends un peu avant de cocher Résolu.

Bonjour,

Impeccable en production, MERCI.

Je coche résolu.