simona6 Posted August 11, 2023 Share Posted August 11, 2023 .curved-bottom { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } I'm trying to use this code, to create a bottom curve to Page Builder rows (WP Bakery). When I set the background of the row to be a colour, this works. When I try it with a background image, it doesn't. No curve at all. Why might that be, and is there a simple fix? Quote Link to comment https://forums.phpfreaks.com/topic/317178-border-bottom-curve-radius-doesnt-work-when-div-has-background-image/ Share on other sites More sharing options...
Barand Posted August 11, 2023 Share Posted August 11, 2023 I get same result, with and without background image, in both Firefox and Chrome <head> <style type='text/css'> .test { width: 300px; height: 300px; margin: 50px; padding: 20px; background-color: black; background-image: url(caution_logo.jpg); background-repeat: no-repeat; background-position: center; background-size: 50%; border: 1px solid black; float: left; } .test2 { width: 300px; height: 300px; margin: 50px; padding: 20px; background-color: black; border: 1px solid black; float: left; } .curved-bottom { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } </style> </head> <body> <div class='test curved-bottom'> </div> <div class='test2 curved-bottom'> </div> </body> Quote Link to comment https://forums.phpfreaks.com/topic/317178-border-bottom-curve-radius-doesnt-work-when-div-has-background-image/#findComment-1611058 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.