How to mask image with rounded corners?

Asked Oct 13 '18 at 10:27

Active Oct 13 '18 at 12:27

Viewed 733 times

I want to use image masking or whatever method is best for this .

the shape I want to create is this

so, how can i accomplish something like this.

i was trying to use clip path for this, but i can only make one round shape from it. i was trying to use another clip path circle with different values to create the other round shape. but it didnt work.

so, how to accomplish something like this?

edited Jun 20 '20 at 09:12

Community

asked Oct 13 '18 at 10:27

faraz

2,603
12
39
61

2

Try this https://bennettfeely.com/clippy/ using custom polygon by adding tons of "dots" – Sergey Oct 13 '18 at 10:35
i tried using it but somehow wasnt sure how to make it work. – faraz Oct 13 '18 at 10:35
click custom polygon. then click wherever on the picture on the left – Sergey Oct 13 '18 at 10:39
Gotcha https://css-tricks.com/clipping-masking-css/#article-header-id-3 – Sergey Oct 13 '18 at 10:40
try this https://www.sarasoueidan.com/blog/css-svg-clipping/ – Pramvir Raghav Oct 13 '18 at 10:42
thanks. these links look like they could help. – faraz Oct 13 '18 at 10:49
yes, I was able to do it from reading those links. thanks – faraz Oct 13 '18 at 11:15

How to mask image with rounded corners?

0 Answers0