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.
<!-- 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.
<!--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.
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.