border-radius not working

Question

I m working on a basic div and for some peculiar reason  border-radius  7px isn t applying to it    panel     float  right    width  120px    height  auto    background   fff    border-radius  7px     not working

User · Answer

Now I am using the browser kit like this     border-radius  7px  -webkit-border-radius  7px  -moz-border-radius  7px

User · Answer

you may include bootstrap to your html file and you put it under the style file so if you do that bootstrap file will override the style file briefly like this          style file       lt link rel  stylesheet  href  css style css    gt          bootstrap file       lt link rel  stylesheet  href  css bootstrap min css    gt    the right way is this         bootstrap file      lt link rel  stylesheet  href  css bootstrap min css    gt         style file      lt link rel  stylesheet  href  css style css    gt

User · Answer

Your problem is unrelated to how you have set border-radius  Fire up Chrome and hit Ctrl Shift j and inspect the element  Uncheck width and the border will have curved corners

User · Answer

if you have parent element than your parent element must have overflow  hidden  property because if your children content is getting oveflowed from parent border than your border will be visible  otherwise your borderradius is working but it is hide by your children content   x000D   x000D   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    x000D   lt div class  outer  gt     lt div class  inner1  gt           lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

For anyone who comes across this issue in the future  I had to add  perspective  1px    to the element that I was applying the border radius to  Final working code    ele-with-border-radius       border-radius  15px      overflow  hidden      perspective  1px

User · Answer

To add a bit on to  ethanmay  s answer   https   stackoverflow com a 44334424 8479303      If there are contents within the div that has the curved corners  you have to set overflow  hidden because otherwise the child  div s overflow can give the impression that the border-radius isn t working    lt  -- This will look like the border-radius isn t working-- gt   lt div style  border  1px solid black  border-radius  10px   gt     lt div style  background  red   gt        text     lt  div gt   lt  div gt    lt  -- but here the contents properly fit within the rounded div -- gt   lt div style  border  1px solid black  border-radius  10px  overflow  hidden   gt     lt div style  background  red   gt        text     lt  div gt   lt  div gt    JSFiddle  http   jsfiddle net o2t68exj

User · Answer

in your div class  social-box   css  use               float right    instead of                float left

User · Answer

For my case  I have a dropdown list in my div container  so I can not use overflow  hidden or my dropdown list will be hidden   Inspired by this discussion  https   twitter com siddharthkp status 1094821277452234752 I use border-bottom-left-radius and border-bottom-right-radius in the child element to fix this issue      make sure you add it the correct value for each child separately

User · Answer

Try add  important to your css  Its working for me    panel     float  right    width  120px    height  auto    background   fff    border-radius  7px important

User · Answer

For some reason your padding  7px setting is nullifying the border-radius  Change it to padding  0px 7px

User · Answer

To whomever may have this issue  My problem was border-collapse  It was set to   border-collapse  collapse    I set it to   border-collapse  separate     and it fixed the issue

User · Answer

Im just highlighting part of  Ethan May answer which is   overflow  hidden    It would most probably do the work for your case

[css] border-radius not working

Examples related to css

Examples related to border