Rounded corners / border radius

This lesson will be easy, sweet, and short. We will learn how to add rounded corners in Tailwind CSS and use the border radius property.

Rounded corners are a detail, but very important in design.

Note: In design theory, rounded corners require less cognitive (i.e. related to learning and understanding reality) effort. They also look friendlier to us. Why?

This is related to the so-called "contour bias", which makes us associate sharp edges with danger (like the fangs and claws of a wild animal, which our ancestors lived in fear of). In contrast to them, there are gentle and rounded edges, which seem more friendly and safe to us.

How to add border radius?

In CSS, the border-radius property is responsible for rounded corners.

In Tailwind CSS, it's very easy to add rounded corners to any element and manipulate the border-radius property.

Just add class rounded- + size to the element. You have sizes from none (removes rounded corners) up to full, so to add for example slightly rounded corners you can use class rounded-md or similar.


Add rounded corners to the carousel

Now let's add rounded corners to our carousel via the .rounded-2xl class.

To modify the appearance of the carousel, we need to add the rounded-2xl class to the Carousel items part.

After saving the file and refreshing your browser, you'll see that our carousel now has cute rounded corners.


John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.