Make your images interesting with just one line of CSS

I don’t know about you, but I totally love blob-shaped images like these on websites. It makes the page appear more modern (and less boring).

I was looking for the easiest way to make images like these and found a solution without the use of SVGs or masks. Any guesses?

The border-radius property

You can set different radius for all four corners AND set an additional radius using border-radius to achieve elliptical corners.

Here’s an example:

/* (first radius values) / (second radius values) */
border-radius: 10% 20% 30% 40% / 40% 30% 20% 10%;

Refer MDN docs for better understanding.

But you don’t have to worry about the syntax. You can use tools like Fancy Border Radius Generator and simply copy the value. (This is not a sponsored link 😊)

Step-by-step guide

Add an image

<img src="..." alt="...">

Crop the image into a square using width, height and object-fit properties

img {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

Copy the border radius values from the generator tool and paste it.

img {
  ...
  border-radius: 62% 38% 62% 38% / 65% 69% 31% 35%;
}

Here’s a demo - https://codepen.io/thirus/pen/mdGMPmv?editors=1100
Neat right?

---

📘 I’m writing a new book!

If you loved this write-up and how it was explained, you’ll absolutely love my next eBook Level up with Tailwind CSS. Opened pre-orders two weeks ago and a hundred people have grabbed it already 🤯 Check it out!

📨 Newsletter suggestion

I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇

Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.