TW Elements - Rounded corners / border radius. Free UI/UX design course

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.

HTML

<!-- border-radius: 0px; -->
<img src="..." class="rounded-none" alt="..." />

<!-- border-radius: 0.125rem; -->
<img src="..." class="rounded-sm" alt="..." />

<!-- border-radius: 0.25rem; -->
<img src="..." class="rounded" alt="..." />

<!-- border-radius: 0.375rem; -->
<img src="..." class="rounded-md" alt="..." />

<!-- border-radius: 0.5rem; -->
<img src="..." class="rounded-lg" alt="..." />

<!-- border-radius: 0.75rem; -->
<img src="..." class="rounded-xl" alt="..." />

<!-- border-radius: .1rem; -->
<img src="..." class="rounded-2xl" alt="..." />

<!-- border-radius: 1.5rem; -->
<img src="..." class="rounded-3xl" alt="..." />

<!-- border-radius: 9999px; -->
<img src="..." class="rounded-full" alt="..." />

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.

HTML

<!--Carousel items-->
<div
  class="relative w-full overflow-hidden rounded-2xl after:clear-both after:block after:content-['']">
  [...]
</div>

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

DEMO AND SOURCE CODE FOR THIS LESSON