How to round out corners when using CSS clip-path

css clip-path
Eduardo Hernandez picture Eduardo Hernandez · Aug 1, 2015 · Viewed 44.4k times · Source

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?

Answer

J-Roel picture J-Roel · Dec 13, 2016

You can also mess around with the circle to get some different effects.

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen

Too bad you can't combine the polygon and circle... or maybe you can and I haven't played around with it enough to figure it out. HTH

Related questions

How to make clip-path work on Microsoft Edge?

While making a clipped header for Firefox and Microsoft Edge(ME), I used clip-path. It works in Firefox just by putting clipPath element inside an SVG element and a clip-path style inside the HTML element. When I open this same …

Read More
Clip-Path Inset in CSS not working in chrome

I'm trying to use the CSS property clip-path, but I get an Invalid property value error in Chrome. Here's a small demo: Note: This is different from this question on clip-path does not work with chrome, because it's specifically asking …

Read More
Clip-path doesn't work in firefox [% values]

I am trying to run svg clip-path in mozilla but it doesn't work. .mask-1 { -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); } It works in chrome perfectly. Can anyone can help me out with mozilla and other browsers?

Read More