Add blob shape border to images

blob shape image border

Give a blob shape look to any image with one line of CSS code. For the best effect, make sure your image height and width values are same.

Preview: Before and After

Sample Image 01
Sample Image 01

Step 1

Add image to your layout, make sure width and height is same.

Step 2

Add CSS class vc-image-1 to the image. If using gutenberg blocks layout, click on image and navigate to the bottom right part of the panel “advanced” section. Expand that section and add class name in the “additional CSS classes” box.

Step 3

Add the following CSS code

.vc-image-1 img {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
}

Additional Information

Use this tool to generate “border-radius” code for more customized blob shape

Image Credits: https://unsplash.com/photos/YLiM1QcwvHU

💬 Subscribe for Free, for more CSS magic.
.
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login

Leave a Comment

Your email address will not be published.