Updated on October 15, 2025

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.

Tailwind Rounded Classes Guide (v3 and v4)

TL;DR: Use rounded-* utilities to control border radius; v4 adds size tokens like rounded-xs and CSS variables, while v3 uses the familiar sm → 3xl → full scale. See tables below for a quick map and copy-paste examples. Updated Oct 15, 2025.

On this page

• What are Tailwind rounded classes?

• Which rounded sizes exist in v4 vs v3?

• How do I round only some corners or sides?

• How do I do responsive or state-based rounding?

• Can I customize the radius scale?

• Copy-paste UI snippets

• Best practices and common pitfalls

• FAQ

What are Tailwind rounded classes?

Short answer: Utilities that set border-radius without custom CSS. Add rounded-* to any element to quickly create subtle corners, large pills, or perfect circles.

See also: Tailkits UI components for production-ready cards and buttons, and Box Shadow Generator to pair radius with depth.

Which rounded sizes exist in v4 vs v3?

Short answer: v4 introduces size tokens like rounded-xs backed by CSS variables; v3 uses a numeric scale. Both include rounded-full for pills and circles.

v4 quick map

v3 quick map

Reference: Tailwind v3 border-radius docs

How do I round only some corners or sides?

Short answer: Use rounded-t-*, rounded-b-*, rounded-l-*, rounded-r-* for sides, or rounded-tl-*, rounded-tr-*, rounded-br-*, rounded-bl-* for individual corners.

Example: rounded-t-lg for only the top corners or rounded-tr-xl for just the top-right corner. :contentReference[oaicite:8]{index=8}

How do I do responsive or state-based rounding?

Short answer: Prefix with breakpoints or states.

• Responsive: sm:rounded, md:rounded-lg, lg:rounded-full

• States: hover:rounded-xl, focus:rounded-lg, active:rounded-md See also: Tailwind’s utility-first pattern. :contentReference[oaicite:9]{index=9}

Can I customize the radius scale?

Short answer: Yes.

• v4: override -radius-* CSS variables in your theme.

• v3: extend theme.borderRadius in tailwind.config.js. References: v4 and v3 docs. :contentReference[oaicite:10]{index=10}

Copy-paste UI snippets

1) Button with subtle rounding

<button class="rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700">
  Get started
</button>

2) Card with only top corners

<div class="rounded-t-lg border border-gray-200 bg-white p-6 shadow-sm">
  <h3 class="text-lg font-semibold">Card title</h3>
  <p class="mt-2 text-gray-600">Card content goes here.</p>
</div>

3) Avatar circle

<img src="/img/user.jpg" alt="User avatar" class="h-16 w-16 rounded-full object-cover" />

4) Chip / pill

<span class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700">
  New
</span>

Best practices and common pitfalls

• Match radius to component hierarchy: small for inputs, larger for cards, largest for pills.

• Be consistent: pick 2–3 radii across your system.

• Mind images: use object-cover with rounded images to avoid stretching.

• Avoid over-rounding: rounded-full works best for square avatars and pills.

• Pair with depth: subtle shadow-sm or shadow enhances rounded surfaces. See Background Colors and Background Blur for layered styling.

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.

v4 tokens vs v3 values

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.

FAQ

What is the difference between v3 and v4 rounded classes?

v4 adds variable-backed tokens like rounded-xs and rounded mapped to CSS variables; v3 uses fixed rem values. Both support side and corner variants.

How do I make a circle avatar in Tailwind?

Use rounded-full on a square image and set fixed w and h like w-16 h-16.

Can I round only the top or left side?

Yes – use side utilities like rounded-t-lg or rounded-l-md. Individual corners use tl, tr, br, bl.

How do I migrate from v3 to v4 for border radius?

Keep your existing classes or switch to v4 tokens. If you need custom values, override v4’s --radius-* variables or extend v3’s theme.borderRadius.