How To Make An Artsy Half Rounded Image in Tailwind CSS

preview

Ever wanted to make your image look a little artsy by messing with its corners? Well you can do this pretty easily in Tailwind CSS! :)

Out of the box your image has no rounded corners and looks something like this:

no rounded corners

In TailwindCSS, you can change the corners by manipulating the border radius property. Learn more on their docs page.

We can get some nice curve going by adding the rounded-3xl property to our image.

3xl rounded corners

This is cool but we want to update each corner. Tailwind easily lets us do that by prefixing our rounded property with tr, tl, bl, br (top right, top left and so son). So if we add rounded-bl-3xl rounded-tr-3xl we get an image that looks like this:

different corners

Getting closer to our final version! Tailwind only goes up to 1.5rem in border radius at 3xl though. And the next setting is rounded-full which will make the whole image round like this.

fully rounded corners

So we need to add a custom property to find a nice in between. To do this we add this little snippet under theme in our tailwind.config.js file.

theme: {
  extend: {
    borderRadius: {
      extraLarge: '12rem'
    }
  }
}

See the docs to learn more.

I chose 12 rem for my corners but you can go higher or lower. Once we add this we will have 5 new properties available to us: rounded-extraLarge, rounded-tr-extraLarge, rounded-tl-extraLarge, rounded-br-extraLarge, rounded-bl-extraLarge.

And now we can do what we did last time with our extraLarge property and add rounded-tr-extraLarge rounded-bl-extraLarge to our image.

final image

Yay! We have our artsy curvy image :)

We can easily change it up and reverse the corners to get a whole new look as well. Just add rounded-tl-extraLarge rounded-br-extraLarge instead:

cooler?

Hope this little mini guide was helpful. Now go spice up your designs with this little trick!

If you’d like to se the whole website using this you can check out my Next Ozone Template. I build beautiful Next.js + Tailwind CSS production ready templates to save you months of coding time! Shoot me a message if you have a project that needs a kickstart.

You can also follow my shenanigans on Twitter.

Cheers,
Bilal