Tailwind CSS Rounded Classes Guide | Easily Apply Border Radius

In Tailwind CSS, the rounded utility classes are used to apply border-radius to elements, giving them rounded corners. This allows you to easily create elements with various levels of corner rounding without writing custom CSS.

Basic Usage

rounded: Applies a small border-radius (default is 0.25rem or 4px by default).
rounded-none: Removes any border-radius (sets it to 0).
rounded-sm: Applies a slightly smaller border-radius (0.125rem or 2px).
rounded-md: Applies a medium border-radius (0.375rem or 6px).
rounded-lg: Applies a large border-radius (0.5rem or 8px).
rounded-xl: Applies a larger border-radius (0.75rem or 12px).
rounded-2xl: Applies an even larger border-radius (1rem or 16px).
rounded-3xl: Applies a very large border-radius (1.5rem or 24px).
rounded-full: Makes the element fully rounded (border-radius set to 9999px), ideal for creating circles or pills.

Applying to Specific Corners

You can also apply border-radius to specific corners using the following classes:

Top Corners:
- rounded-t-none
- rounded-t-sm
- rounded-t
- rounded-t-md
- rounded-t-lg
- rounded-t-xl
- rounded-t-2xl
- rounded-t-3xl
- rounded-t-full
Right Corners:
- rounded-r-none
- rounded-r-sm
- rounded-r
- rounded-r-md
- rounded-r-lg
- rounded-r-xl
- rounded-r-2xl
- rounded-r-3xl
- rounded-r-full
Bottom Corners:
- rounded-b-none
- rounded-b-sm
- rounded-b
- rounded-b-md
- rounded-b-lg
- rounded-b-xl
- rounded-b-2xl
- rounded-b-3xl
- rounded-b-full
Left Corners:
- rounded-l-none
- rounded-l-sm
- rounded-l
- rounded-l-md
- rounded-l-lg
- rounded-l-xl
- rounded-l-2xl
- rounded-l-3xl
- rounded-l-full
Individual Corners:
- Top Left:
  - rounded-tl-none
  - rounded-tl-sm
  - rounded-tl
  - rounded-tl-md
  - rounded-tl-lg
  - rounded-tl-xl
  - rounded-tl-2xl
  - rounded-tl-3xl
  - rounded-tl-full
- Top Right:
  - rounded-tr-none
  - rounded-tr-sm
  - rounded-tr
  - rounded-tr-md
  - rounded-tr-lg
  - rounded-tr-xl
  - rounded-tr-2xl
  - rounded-tr-3xl
  - rounded-tr-full
- Bottom Right:
  - rounded-br-none
  - rounded-br-sm
  - rounded-br
  - rounded-br-md
  - rounded-br-lg
  - rounded-br-xl
  - rounded-br-2xl
  - rounded-br-3xl
  - rounded-br-full
- Bottom Left:
  - rounded-bl-none
  - rounded-bl-sm
  - rounded-bl
  - rounded-bl-md
  - rounded-bl-lg
  - rounded-bl-xl
  - rounded-bl-2xl
  - rounded-bl-3xl
  - rounded-bl-full

Examples

1. Rounded Button:

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

This button will have slightly rounded corners.

2. Circle Avatar:

<img src="avatar.jpg" alt="Avatar" class="rounded-full w-16 h-16">

This image will be displayed as a circle assuming it's a square image due to the rounded-full class.

3. Card with Top Rounded Corners:

<div class="bg-white shadow-lg rounded-t-lg p-6">
  <h2 class="text-xl font-bold">Card Title</h2>
  <p class="mt-4">Card content goes here.</p>
</div>

Only the top corners of the card will be rounded.

Customizing Border Radius

If you need custom border-radius values, you can extend the default theme in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'custom': '10px',
      },
    },
  },
}

Then you can use rounded-custom in your HTML:

<div class="bg-gray-200 p-4 rounded-custom">
  Custom rounded corners
</div>

Responsive Design

You can apply different rounding at different breakpoints:

<div class="rounded-sm md:rounded-lg lg:rounded-full">
  Responsive rounded corners
</div>

On small screens, the element has small rounded corners.
On medium screens and up, it has large rounded corners.
On large screens and up, it becomes fully rounded.

Conclusion

Tailwind's rounded utility classes provide a simple way to control the border-radius of elements, making it easy to create visually appealing designs with minimal effort. By combining these classes with responsive prefixes and custom configurations, you can fine-tune the appearance of elements to fit the needs of your project.