el radio del borde no funciona

Estoy trabajando en un básico. div y por alguna extraña razón, border-radius: 7px no se aplica a ella.

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

preguntado el 12 de junio de 12 a las 11:06

A veces, puede aplicar border-radius a un contenedor contenedor y funcionará bien. Por ejemplo, estaba tratando de establecer border-radius en un div dentro de la etiqueta y no funcionaba. Pero cuando apliqué border-radius para etiquetar directamente, funcionó de maravilla. -

12 Respuestas

A quien pueda tener este problema. Mi problema era el colapso de la frontera. Se configuró para:

border-collapse: collapse;

Lo configuré para:

border-collapse: separate; 

y solucionó el problema.

Respondido el 01 de junio de 15 a las 23:06

Acabo de agregar "border-colapso: separado"; a mi CSS en línea y ¡funcionó! ¡Gracias! - Danny

Disculpas por la actualización tardía de esta publicación. Después de leer la especificación de colapso de borde en W3C, puedo confirmar que esta es semánticamente la respuesta correcta y parece tener una compatibilidad decente entre navegadores: Matt

Cuando configuré el colapso del borde para separarlo, ELIMINÉ TODOS LOS BORDES de todos elementos. - Incitar

He tenido problemas similares en el pasado debido a otros CSS que no deberían haberse configurado, luego, al corregir uno, se mostró el error en el otro. Si crea un codepen o algo así, sería más fácil ver cuál podría ser el problema. - RoboYak

Para cualquiera que se encuentre con este problema en el futuro, tuve que agregar

perspective: 1px;

al elemento al que estaba aplicando el radio del borde. Código de trabajo final:

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

Respondido el 02 de junio de 17 a las 18:06

La overflow: hidden property hace el trabajo para la mayoría de los contenedores. - Felipe D.

desbordamiento: oculto, FTW - gdbj

¿¿perspectiva?? Bien eso es ¡extraño! - ver más nítido

Me encantaría que alguien me explicara por qué esto funcionó para mí. El 99.999% de las veces solo necesita desbordamiento: oculto en el contenedor, pero a veces eso simplemente no funciona. es muy raro - Etan mayo

Intenté el colapso del borde anterior, pero no funcionó, pero estos (desbordamiento y perspectiva) también me funcionaron. ¡Gracias! - Christopher

Para agregar un poco a la respuesta de @ethanmay: (https://stackoverflow.com/a/44334424/8479303) ...

Si hay contenido dentro del div que tiene las esquinas curvas, tienes que configurar overflow: hidden porque de lo contrario, el desbordamiento del div secundario puede dar la impresión de que el border-radius no está funcionando.

<!-- 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/

Respondido el 28 de diciembre de 18 a las 22:12

Esta respuesta funcionó para mí. Ninguno de los otros lo hizo. Específicamente estaba trabajando con nested y etiquetas - lucas shinn

Solo estoy destacando parte de la respuesta de @Ethan May, que es

overflow: hidden;

Lo más probable es que haga el trabajo en su caso.

Respondido el 18 de Septiembre de 19 a las 10:09

Por alguna razón, su relleno: la configuración de 7px está anulando el radio del borde. cambiarlo a padding: 0px 7px

Respondido el 12 de junio de 12 a las 12:06

Gracias. Fue que el cuadro aplicó border-radius con éxito, pero debido al relleno, no se pudo ver. - Juan sánchez

en tu div class="social-box" css

utilizado

            float:right 

en lugar de

             float:left

Respondido el 12 de junio de 12 a las 12:06

¿Por qué? Esto no tiene relación con la pregunta formulada. - alex chambelán

border-radius se aplicó con éxito en ese div pero no flotaba correctamente ... - Usman

Esto no lo soluciona en Chrome. - alex chambelán

@Alex... No sé qué versión de Chrome estás usando... pero funciona bien para mí en Chrome 19.0.1084.56, FF 13.0 - Usman

He intentado establecer float: initial en el navegador, lo que resolvió mi problema. Luego me di cuenta, que después de quitar esa propiedad funciona igual, creo que en mi caso el problema en el navegador: Versión de Chrome 55.0.2883.87 (64 bits) - Arman Yeghiazaryan

Intenta agregar ! Importantes a tu CSS. Está funcionando para mí.

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

Respondido el 11 de enero de 18 a las 04:01

Mi problema era que en algún otro lugar tenía el !importante, por lo que estaba pisando mis propiedades: Filtro de indicativo de llamada

si tiene un elemento principal, su elemento principal debe tener desbordamiento: oculto; propiedad porque si el contenido de sus hijos se desborda del borde principal, entonces su borde será visible. De lo contrario, su borderradius está funcionando pero está oculto por el contenido de sus hijos.

.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;
}
<div class="outer">
  <div class="inner1">
     
  </div>
</div>

Respondido el 15 de enero de 21 a las 18:01

Su problema no está relacionado con la forma en que ha configurado border-radius. Enciende Chrome y presiona Ctrl+Shift+j e inspeccione el elemento. Desmarcar width y el borde tendrá esquinas curvas.

Respondido el 12 de junio de 12 a las 12:06

Ahora estoy usando el kit de navegador así:

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

Respondido el 12 de junio de 12 a las 14:06

¿Has probado esto? No soluciona este problema en particular. - alex chambelán

puede incluir bootstrap en su archivo html y colocarlo debajo del archivo de estilo, de modo que si lo hace, ese archivo de arranque anulará el archivo de estilo brevemente así

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

la forma correcta es esta

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

Respondido el 01 de enero de 19 a las 12:01

Incluir Bootstrap no es una respuesta válida. Está sugiriendo que los usuarios solucionen este problema agregando un recurso de 34 kb que los usuarios deben descargar. - Matt

@Matt, creo que quiso decir que si usas bootstrap, probablemente no funcione porque tus estilos se sobrescriben con bootstrap, debido al orden de importación: Benjamín Jesuita

Para mi caso, tengo una lista desplegable en mi contenedor div, por lo que no puedo usar overflow: hidden o mi lista desplegable estará oculta.

Inspirado por esta discusión: https://twitter.com/siddharthkp/status/1094821277452234752 yo suelo border-bottom-left-radius y border-bottom-right-radius en el elemento secundario para solucionar este problema.

asegúrese de agregar el valor correcto para cada niño por separado

enter image description here

Respondido 20 Feb 20, 03:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.