Menu
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 } 
580
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. Show activity on this post.
border-radius property is not supported by outlook, as it uses MS-word template. we need to code for outlook too. Please find the below piece of code which will work for both outlook and browser or other email clients.
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
The standard email clients will need both the border and border-radius set, but since Outlook doesn't support border-radius , it would make a sharp corner in Outlook.
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.
144
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With