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 } 

Answer 1

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.

Answer 2

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