Border-radius ne fonctionne pas sur mon background-image

Bonjour

je souhaiterais arrondir les 4 angles d'une image. Cependant lorsque je met border-radius: 5px dans le CSS cela n'arrondit que les deux bords gauches, et pas les bords droits. Voyez plutôt :

http://www.noelshack.com/2019-38-5-1568988821-capture1.png

Voici mon code CSS 3 :

#banniere_image
{background: url(san_francisco.jpg) no-repeat;
height:200px;
width:900px;
margin-top:15px;
margin-bottom: 25px;
border-radius:5px;}

(l'image est dans un div)

A noter que quand j'enlève le no-repeat les bords droits deviennent arrondis comme souhaités cependant ce n'est pas le résultat que je veux puisque ça donne ça :

http://www.noelshack.com/2019-38-5-1568989179-capture3.png

Avez vous une idée de à quoi pourrait être du mon problème ?

Bon après-midi !

Notanoil

Bonjour,

il n'y a pas vraiment de problème dans le sens où c'est le comportement normal (Border-radius s'applique toujours a l'élément, pas à l'image de fond).
Le résultat n'est pas très heureux car ton image de fond est simplement trop petite.

Bonjour,
à tout hasard, ne faut-il pas mettre les préfix ?
.coins_arrondis {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
Lien : https://www.lije-creative.com/le-top-10-des-proprietes-css3-compatibilite-inter-navigateur/
Je vois qu'il a modifié sa page le 20 septembre 2019, mais les préfixes pour border-radius sont-ils encore nécessaires ?

Ce n'est plus très utile pour border-radius :
https://caniuse.com/#feat=border-radius
Modifié par bacasable (20 Sep 2019 - 20:40)