web-dev-qa-db-fra.com

border-radius ne fonctionne pas

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

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px; // not working
}
csscss3border
31
Matt

À qui peut avoir ce problème. Mon problème était l'effondrement des frontières. Il devait:

border-collapse: collapse;

Je l'ai réglé sur:

border-collapse: separate;

et cela a résolu le problème.

52
Elijah Tate

Pour quiconque rencontrera ce problème à l'avenir, je devais ajouter

perspective: 1px;

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

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

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

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

<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
  <div style="background: red;">
      text!
  </div>
</div>

<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
  <div style="background: red;">
      text!
  </div>
</div>

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

7
jnotelddim

dans votre div class = "social-box" css

utilisation

            float:right

au lieu de

             float:left
7
Usman

Pour une raison quelconque, votre paramètre padding: 7px annule le rayon de la bordure. Remplacez-le par padding: 0px 7px

6
jakee

Votre problème n'est pas lié à la façon dont vous avez défini border-radius. Lancez Chrome et appuyez sur Ctrl+Shift+j et inspecter l'élément. Décochez width et la bordure aura des coins incurvés.

2
Alex Chamberlain

Maintenant, j'utilise le kit de navigateur comme ceci:

{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
2
Rohit Azad

Essayez d'ajouter ! Important à votre CSS. Cela fonctionne pour moi.

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px!important;
}
1
syadiqfaliq

Je ne fais que souligner une partie de la réponse @Ethan May qui est

    overflow: hidden;

Cela ferait probablement le travail pour votre cas.

0
Baldráni

vous pouvez inclure bootstrap dans votre fichier html et vous le mettez sous le fichier de style donc si vous faites cela bootstrap remplacera le fichier de style brièvement comme ceci)

     // style file
     <link rel="stylesheet" href="css/style.css" />
     // bootstrap file
     <link rel="stylesheet" href="css/bootstrap.min.css" />

la bonne façon est-ce

    // bootstrap file
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    // style file
    <link rel="stylesheet" href="css/style.css" />
0
Muntadar Muhammad