border-radius no funciona

Question

Estoy trabajando en un div básico y por algún motivo peculiar, border-radius: 7px no se aplica a él.

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

Answer 1

Para quien pueda tener este problema. Mi problema fue el colapso de la frontera. Se establece en:

border-collapse: collapse; 

lo fijo a:

border-collapse: separate; 

y se ha solucionado el problema.

Answer 2

Ahora estoy usando el kit de explorador de la siguiente manera:

{ 
border-radius: 7px; 
-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
} 

Answer 3

Por alguna razón su padding: ajuste 7px está anulando la frontera de radio. Cambiarlo a padding: 0px 7px

Answer 4

en su div class = "caja social" css

uso

  float:right 

en lugar de

   float:left 

Answer 5

Su problema no está relacionado con la forma en que haya configurado border-radius . Encienda Chrome y pulse Ctrl+Shift+j e inspeccione el elemento. Desmarque width y el borde tendrá esquinas curvas.

Answer 6

Para cualquier persona que se encuentra con este problema en el futuro, he tenido que añadir

perspective: 1px; 

al elemento que estaba aplicando el radio frontera para. Código de trabajo final:

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

Answer 7

Intenta añadir importante a su css!. Funciona para mí.

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