Tailwind CSS Border Radius Example

In this section we will see how to use border radius in tailwind css. Border radius is most common and most used utilities class We will see border radius sizes, border radius sides, custom border radius example with Tailwind CSS.

How to install & setup Tailwind CSS v3

Example 1

Tailwind border radius utilities rounded, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl and rounded-full.

<div class="p-3 bg-blue-500 rounded">rounded</div>
<div class="p-3 bg-blue-500 rounded-sm">rounded-sm</div>
<div class="p-3 bg-blue-500 rounded-md">rounded-md</div>
<div class="p-3 bg-blue-500 rounded-lg">rounded-lg</div>
<div class="p-3 bg-blue-500 rounded-xl">rounded-xl</div>
<div class="p-3 bg-blue-500 rounded-2xl">rounded-2xl</div>
<div class="p-3 bg-blue-500 rounded-3xl">rounded-3xl</div>
<div class="p-3 bg-blue-500 rounded-full">rounded-full</div>

tailwind border radius utilities

Example 2

tailwind css border radius top, left, bottom and right sides.

<div class="p-3 bg-blue-500 rounded-t-lg">rounded top</div>
<div class="p-3 bg-blue-500 rounded-l-lg">rounded left</div>
<div class="p-3 bg-blue-500 rounded-b-lg">rounded bottom</div>
<div class="p-3 bg-blue-500 rounded-r-lg">rounded right</div>

border radius top, left, bottom and right sides

tailwind border radius rounded-{tl|tr|br|bl}{-size?} only round one corner an element.

<div class="p-3 bg-blue-500 rounded-tl-lg">rounded top left</div>
<div class="p-3 bg-blue-500 rounded-tr-lg">rounded top right</div>
<div class="p-3 bg-blue-500 rounded-br-lg">rounded bottom right</div>
<div class="p-3 bg-blue-500 rounded-bl-lg">rounded bottom left</div>

Example 3

tailwind border radius with hover.

<div class="p-3 bg-blue-500 rounded hover:rounded-full">rounded hover</div>

tailwind responsive border radius.

<div class="p-3 bg-blue-500 rounded md:rounded-lg lg:rounded-2xl">responsive rounded</div>  

Example 4

tailwind css custom border radius size with px, rem.

<div class="p-3 bg-blue-500 rounded-[16px]">Custom Border Radius</div>
<div class="p-3 bg-blue-500 rounded-[2rem]">Custom Border Radius</div>

tailwind css custom border radius size

Example 5

tailwind css button border radius.

create button with border radius in tailwind css

tailwind css simple card with border radius.

<div class="max-w-xs rounded-lg shadow">
    <div class="px-3 py-2">
        <h2 class="text-xl font-bold text-indigo-600">
            Tailwind v3 Border Radius
        </h2>
        <p class="text-gray-600">
            Lorem, tailwind css border radius class example
        </p>
    </div>
</div>

tailwind css image avatar with border radius.

<img src="https://cdn.pixabay.com/photo/2016/03/31/19/56/avatar-1295395__340.png" alt="no image"
    class="object-cover w-16 h-16 rounded-lg" />
<img src="https://cdn.pixabay.com/photo/2016/03/31/19/56/avatar-1295395__340.png" alt="no image"
    class="object-cover w-16 h-16 rounded-full" />

tailwind css image avatar with border radius

Read Also

Tailwind CSS Border Width Example

Tailwind CSS Border Color Example

Tailwind CSS v3 border-x and border-y utilities example

Tailwind CSS Contact Us Form with Bottom Border