Border-radius ne fonctionne pas

Question

Je travaille sur un div de base et pour une raison particulière, border-radius: 7px ne s'applique pas à lui.

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px; // ne fonctionne pas
}

Answer 1

Pour quiconque pourrait rencontrer ce problème. Mon problème était border-collapse. C'était réglé sur :

border-collapse: collapse;

Je l'ai réglé sur :

border-collapse: separate;

et cela a résolu le problème.

Answer 2

Pour ceux qui rencontrent ce problème à l'avenir, j'ai dû ajouter

perspective: 1px;

à l'élément auquel j'appliquais le rayon de bordure. Code final fonctionnel:

.ele-with-border-radius {
    border-radius: 15px;
    overflow: hidden;
    perspective: 1px;
}

Je modifie ma réponse pour inclure quelques clarifications d'autres utilisateurs: En général, tout ce dont vous avez besoin est overflow: hidden; Dans mon cas, cela ne fonctionnait pas non plus et j'ai dû ajouter perspective: 1px;. Je pense que cela a pu être causé par des transformations CSS 3D que j'ai appliquées à l'élément avec un rayon de bordure.

Answer 3

Pour ajouter un peu à la réponse de @ethanmay (https://stackoverflow.com/a/44334424/8479303)...

S'il y a du contenu dans la div qui a des coins arrondis, vous devez définir overflow: hidden car sinon le débordement de la div enfant peut donner l'impression que le border-radius ne fonctionne pas.

      texte !

      texte !

JSFiddle : http://jsfiddle.net/o2t68exj/

Answer 4

Je mets en évidence une partie de la réponse de @Ethan May qui est

overflow: hidden;

Cela fonctionnerait probablement pour votre cas.

Answer 5

Si vous avez un élément parent, votre élément parent doit avoir la propriété overflow: hidden; car si le contenu de vos enfants dépasse la bordure du parent, votre bordure sera visible. Sinon, votre bord arrondi fonctionnera mais il sera caché par le contenu de vos enfants.

.outer {
  width: 200px;
  height: 120px;
  border: 1px solid black;
  margin-left: 50px;
  overflow: hidden;
  border-radius: 30px;
}
.inner1 {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#FF9933, white, green);
  border: 1px solid black;
}