Tailwind Border Radius

The tailwind border radius utility enables you to apply rounded corners to various elements such as buttons, cards, or containers. With Tailwind's border radius classes, you can achieve different levels of roundness based on your design requirements.

How to apply Border Radius in Tailwind CSS

In Tailwind, border radius can be applied using utility classes in the format of rounded-{size}. By default, Tailwind provides the following border radius sizes: sm, md, lg, xl, and 2xl, where sm is the smallest radius and 2xl is the largest.

For example, to apply a medium border radius to a div, you would use the rounded-md class as shown below:

<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-full ..."></div>

Preview

Types of Tailwind Border Radius

Tailwind No Rounded Button

<button class=" border-none rounded-none....">Button</button>

Preview

Tailwind Border Pill Button

<button type="button" class="rounded-full....">Click me</button>

Preview

Border Radius Top

The rounded-t-_ classes in Tailwind CSS are used to apply a rounded border to the top corners of an element, where _ can be a size like sm, lg, or full.

<div
  class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
>
  <div class="rounded-t-md bg-indigo-500 p-4">Top borders Only</div>
</div>

Preview

Border Radius Bottom

The rounded-b-* classes apply a rounded border to the bottom corners of an element.

<div
  class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
>
  <div class="rounded-b-lg bg-indigo-500 p-4">bottom borders Only</div>
</div>

Preview

Border on one side

The rounded-ee, rounded-es, rounded-ss, rounded-se, rounded-tl etc . classes add a border to one specific side of an element.

<div
  class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
>
  <div class="rounded-es-md bg-indigo-500 p-4">bottm End Start Border Only</div>
  <div class="rounded-tr-md bg-indigo-500 p-4">Top right end border</div>
</div>

Preview

Tailwind Border Radius classes and Properties

✨ What's Next?

Now that you’ve mastered Tailwind Border radius, try experimenting with:

• Tailwind CSS Border Width

• Tailwind CSS background Clip

Windframe Tailwind blocks

Content