css – border-radius not working

css – border-radius not working

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.

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;
}

css – border-radius not working

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 divs overflow can give the impression that the border-radius isnt working.

<!-- This will look like the border-radius isnt 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/