Applying Radius to Clip Path. Need Help
Hi everyone I need help to create this but I failed every time to create this in html and css
I dont want to use svg Instead I use clip path but no radius is applied to it please give me the solution
4 Replies
please help
You say no svg on your clip-path, are you just using a hand-written path then? You need those curves in your clip-path because it’s clipping off your box, so any border-radius is clipped. This has been a common question for on here for this shape, you may want to search “inverted border radius” and see what others have done. I like to use an svg in the shape I want for the clip path but other solutions I’ve seen are using a pseudo element on top to make that curve in
Kevin has a video on it too https://www.youtube.com/watch?v=khjVPkO35F0
Kevin Powell
YouTube
Creating an inverted border-radius with CSS
The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way!
🔗 Links
✅ The original tweet: https://twi...
keep in mind though, it's a bit of a challenge video. Pay attention to what he says is and isn't good practice, and honestly consider just using an SVG, it's probably the best solution.