Mastering Border Radius in Tailwind CSS: A Comprehensive Guide

Tailwind CSS Border Radius Guide blog | Published on : 16th August, 2023

The radius of the border describes how an element's corners are rounded. It is an important design element that can have a big impact on the aesthetics and user experience of a website. By offering a series of utility classes that you can immediately add to your HTML components, Tailwind CSS streamlines the process of implementing border radius.

1. Applying a Basic Border Radius:

For applying border radius to elements, Tailwind CSS provides a clear and straightforward syntax. A specific value that controls the radius of all four is placed after the rounded utility class.

  <div class="w-fit rounded-sm border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-sm</div>
  <div class="w-fit rounded-md border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-md</div>
  <div class="w-fit rounded-lg border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-lg</div>
  <div class="w-fit rounded-xl border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-xl</div>
  <div class="w-fit rounded-2xl  border-2 border-blue-600 bg-transparent px-4 py-2 text-black">rounded-2xl</div>

This code will round all four corners of the <div> element with a moderate radius.

Border radius utility classes in Tailwind

2. Rounded Corners by Sides:

Tailwind CSS also offers the flexibility to define distinct border radius for individual corners of an element. This feature proves especially valuable when crafting distinctive shapes and designs

<div class="flex min-h-screen items-center justify-center gap-4">
  <div class="rounded-tl-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded top-left</div>
  <div class="rounded-b-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded bottom</div>
  <div class="rounded-r-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded right</div>
  <div class="rounded-l-lg bg-transparent border-blue-600 p-4 border-[2px]">rounded left</div>

Custom border radius in Tailwind CSS

3. Applying Border Radius to Specific Elements:

You can apply border radius to specific types of elements, such as buttons or images, to achieve a more customized and polished look.

  <button class="rounded-lg bg-blue-400 p-3 text-white hover:bg-red-600">Click me!</button>
  <img class="h-20 w-20 rounded-full object-cover object-left-top" src="user.jpg" alt="user" />

Improving user experience with rounded elements Note: Here you have to add the user image.

4. Custom Border Radius Values:

If you have specific border radius values in mind that aren't covered by the predefined classes, Tailwind CSS offers the flexibility to define custom values using the rounded utility.

<div class="rounded-[10px_20px_10px_15px] p-3 bg-blue-500 text-white">
  Custom border radius for each corner

Customizing button shapes with border-radius

5. Customizing the Configuration:

If you want to customize the default border radius values or add new ones, you can modify the borderRadius section in your Tailwind CSS configuration file .

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        '4xl': '44px', // Add a new border radius option
  variants: {},
  plugins: [],
 <div class="rounded-tl-4xl bg-transparent border-blue-600 p-6 border-2"> border radius</div>

Tailwind CSS rounded corners examples

Read More:
  1. Mastering Border-x and Border-y in Tailwind CSS: A Comprehensive Guide
  2. Exploring Tailwind CSS Border Width: Tips and Examples
  3. A Deep Dive into Tailwind CSS Border Colors: Tips and Examples
Our team is creating and sharing useful resources on a regular basis and thousands of developers are using Tailwind CSS to create amazing websites with TailwindTap s free open-source pre-made components and templates.

Hire a Developers

TailwindTap FacebookTailwindTap TwitterLinkedinInstagram