Rounding corners with Tailwind CSS border radius

Rounded corners have been a design staple since the early days of CSS3. They soften harsh edges, make interfaces feel more approachable, and help guide the eye through a layout.

Before Tailwind, you would write CSS like border-radius: 0.5rem for every component. Now you can just slap on a rounded-lg class and move on with your life.

But there is more to Tailwind's border-radius utilities than just the basic rounded class. You can round specific corners, use different sizes at different breakpoints, and even create custom radius values that match your design system perfectly.

Let me walk you through everything you need to know about rounding corners in Tailwind CSS.

The basic rounded classes

Tailwind gives you a bunch of preset rounded classes, and honestly most of the time these are all you will ever need.

The most common one is just rounded - it gives you a subtle 4px radius that works great for buttons, input fields, and most UI elements. Then you have rounded-lg (8px) and rounded-xl (12px) for when you want something a bit more pronounced.

On the smaller end, there is rounded-sm at 2px if you want just a hint of rounding. And on the bigger end you have got rounded-2xl and rounded-3xl which go up to 16px and 24px respectively.

The two special ones are rounded-none which removes all rounding (useful for overriding), and rounded-full which creates perfect circles or pill shapes.

<div class='max-w-4xl mx-auto space-y-8 p-4'>
  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Buttons with different rounded values</h3>
    <div class='flex flex-wrap gap-3'>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-none hover:bg-blue-600'>rounded-none</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-sm hover:bg-blue-600'>rounded-sm</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded hover:bg-blue-600'>rounded</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-md hover:bg-blue-600'>rounded-md</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600'>rounded-lg</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-xl hover:bg-blue-600'>rounded-xl</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-2xl hover:bg-blue-600'>rounded-2xl</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-3xl hover:bg-blue-600'>rounded-3xl</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-full hover:bg-blue-600'>rounded-full</button>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Cards with different rounded values</h3>
    <div class='grid grid-cols-2 md:grid-cols-3 gap-4'>
      <div class='bg-white border border-gray-200 rounded p-4 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded</p>
        <p class='text-sm text-gray-700'>Standard card with default rounding</p>
      </div>
      <div class='bg-white border border-gray-200 rounded-lg p-4 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded-lg</p>
        <p class='text-sm text-gray-700'>Card with large rounding</p>
      </div>
      <div class='bg-white border border-gray-200 rounded-2xl p-4 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded-2xl</p>
        <p class='text-sm text-gray-700'>Card with extra-large rounding</p>
      </div>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Avatar examples with rounded-full</h3>
    <div class='flex gap-4 items-center'>
      <div class='size-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold text-sm'>AB</div>
      <div class='size-16 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-semibold'>CD</div>
      <div class='size-20 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center text-white font-semibold text-lg'>EF</div>
    </div>
  </div>
</div>

Here is a quick reference table showing all the rounded classes and their actual pixel values:

Class	Radius Value	Common Use Case
`rounded-none`	0px	Removing inherited rounding
`rounded-sm`	2px	Very subtle rounding
`rounded`	4px	Buttons, inputs, badges
`rounded-md`	6px	Small cards, chips
`rounded-lg`	8px	Cards, modals, containers
`rounded-xl`	12px	Large cards, panels
`rounded-2xl`	16px	Hero sections, feature cards
`rounded-3xl`	24px	Prominent UI elements
`rounded-full`	9999px	Circles, pills, avatars

Most of the time you will reach for rounded, rounded-lg, or rounded-full. Those three cover probably 90% of use cases.

Rounding specific sides and corners

Sometimes you do not want all four corners rounded. Maybe you are building tabs that should only be rounded on top, or a speech bubble that needs a sharp corner pointing at the speaker.

Tailwind lets you target specific sides using rounded-t-* (top), rounded-r-* (right), rounded-b-* (bottom), and rounded-l-* (left). You can also go even more granular and target individual corners with rounded-tl-*, rounded-tr-*, rounded-br-*, and rounded-bl-*.

The asterisk can be any of the size modifiers we saw earlier - sm, md, lg, xl, etc.

Here is where this gets super useful: navigation tabs. You want the top corners rounded but the bottom flat so they blend into the content area below.

<div class='max-w-4xl mx-auto space-y-8 p-4'>
  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Tab navigation with rounded-t</h3>
    <div class='flex gap-1 border-b-2 border-gray-300'>
      <button class='px-6 py-3 bg-blue-500 text-white font-medium rounded-t-lg'>Dashboard</button>
      <button class='px-6 py-3 bg-gray-200 text-gray-700 rounded-t-lg hover:bg-gray-300'>Settings</button>
      <button class='px-6 py-3 bg-gray-200 text-gray-700 rounded-t-lg hover:bg-gray-300'>Profile</button>
    </div>
    <div class='bg-white border border-gray-300 border-t-0 p-6 rounded-b-lg'>
      <p class='text-gray-700 text-sm'>Content area below the tabs</p>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Speech bubbles with selective rounding</h3>
    <div class='space-y-3'>
      <div class='flex justify-start'>
        <div class='bg-gray-200 text-gray-800 p-3 rounded-lg rounded-bl-none max-w-xs text-sm'>
          This message points left with rounded-bl-none
        </div>
      </div>
      <div class='flex justify-end'>
        <div class='bg-blue-500 text-white p-3 rounded-lg rounded-br-none max-w-xs text-sm'>
          This one points right with rounded-br-none
        </div>
      </div>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Cards with partial rounding</h3>
    <div class='grid grid-cols-1 md:grid-cols-3 gap-4'>
      <div class='bg-white border border-gray-200 rounded-t-xl overflow-hidden'>
        <div class='h-32 bg-gradient-to-br from-purple-400 to-pink-500'></div>
        <div class='p-4'>
          <p class='text-xs text-gray-500 mb-1'>rounded-t-xl</p>
          <p class='text-sm text-gray-700'>Top corners only</p>
        </div>
      </div>
      <div class='bg-white border border-gray-200 rounded-r-xl overflow-hidden'>
        <div class='h-32 bg-gradient-to-br from-blue-400 to-cyan-500'></div>
        <div class='p-4'>
          <p class='text-xs text-gray-500 mb-1'>rounded-r-xl</p>
          <p class='text-sm text-gray-700'>Right side only</p>
        </div>
      </div>
      <div class='bg-white border border-gray-200 rounded-tl-xl rounded-br-xl overflow-hidden'>
        <div class='h-32 bg-gradient-to-br from-green-400 to-emerald-500'></div>
        <div class='p-4'>
          <p class='text-xs text-gray-500 mb-1'>rounded-tl & br-xl</p>
          <p class='text-sm text-gray-700'>Diagonal corners</p>
        </div>
      </div>
    </div>
  </div>
</div>

You can also combine multiple corner utilities together. Want just the top-left and bottom-right rounded? Use rounded-tl-lg rounded-br-lg together. This is great for creating unique card designs or asymmetric layouts.

One thing to watch out for: if you apply both rounded-lg and then rounded-t-none, the more specific utility wins. So you can use this to override inherited rounding on specific sides.

Using arbitrary values for custom radius

What if your design system uses a 10px border-radius but Tailwind does not have a class for that exact value? Or what if you want a radius that scales with the viewport width?

This is where arbitrary values come in handy. You can use square brackets to define any custom border-radius value on the fly.

The syntax is simple: rounded-[value] where value can be any valid CSS length unit - pixels, rems, ems, percentages, or even viewport units.

<div class='max-w-4xl mx-auto space-y-8 p-4'>
  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Custom pixel values</h3>
    <div class='flex flex-wrap gap-3'>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-[5px] hover:bg-blue-600'>rounded-[5px]</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-[10px] hover:bg-blue-600'>rounded-[10px]</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-[15px] hover:bg-blue-600'>rounded-[15px]</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-[20px] hover:bg-blue-600'>rounded-[20px]</button>
      <button class='px-4 py-2 bg-blue-500 text-white text-sm rounded-[30px] hover:bg-blue-600'>rounded-[30px]</button>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Percentage-based radius</h3>
    <div class='flex gap-4'>
      <div class='bg-gradient-to-br from-purple-400 to-pink-500 size-24 rounded-[10%] flex items-center justify-center text-white text-xs'>10%</div>
      <div class='bg-gradient-to-br from-blue-400 to-cyan-500 size-24 rounded-[25%] flex items-center justify-center text-white text-xs'>25%</div>
      <div class='bg-gradient-to-br from-green-400 to-emerald-500 size-24 rounded-[40%] flex items-center justify-center text-white text-xs'>40%</div>
      <div class='bg-gradient-to-br from-yellow-400 to-orange-500 size-24 rounded-[50%] flex items-center justify-center text-white text-xs'>50%</div>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Mixed units for creative effects</h3>
    <div class='grid grid-cols-1 md:grid-cols-2 gap-4'>
      <div class='bg-white border border-gray-200 rounded-[1.5rem] p-6 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded-[1.5rem]</p>
        <p class='text-sm text-gray-700'>Using rem units for consistent spacing</p>
      </div>
      <div class='bg-white border border-gray-200 rounded-[2vw] p-6 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded-[2vw]</p>
        <p class='text-sm text-gray-700'>Viewport width - resize to see effect</p>
      </div>
    </div>
  </div>
</div>

When should you use arbitrary values instead of the default classes? Here are a few scenarios:

Your brand guidelines specify exact pixel values that don't match Tailwind's scale
You need viewport-relative rounding for fluid, responsive designs
You are prototyping and want to test different values quickly
You are working with a design token system that uses non-standard values

Just remember that using too many arbitrary values can make your codebase harder to maintain. If you find yourself using rounded-[10px] everywhere, it might be worth adding it to your Tailwind config as a custom utility instead.

Responsive border-radius

Design is not one-size-fits-all, and neither should your border-radius be. What looks great on desktop might feel too subtle on mobile, or vice versa.

Tailwind makes it easy to adjust border-radius at different breakpoints using responsive prefixes like md:, lg:, and xl:. The pattern is simple: start with your mobile-first default, then add overrides for larger screens.

A common pattern is using more pronounced rounding on mobile devices where space is tighter, then dialing it back on desktop where you have more room to breathe.

<div class='max-w-4xl mx-auto space-y-8 p-4'>
  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Cards that adapt to screen size</h3>
    <p class='text-xs text-gray-600'>Resize your browser to see the border-radius change</p>
    <div class='grid grid-cols-1 md:grid-cols-2 gap-4'>
      <div class='bg-white border border-gray-200 rounded-2xl md:rounded-lg p-6 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded-2xl md:rounded-lg</p>
        <p class='text-sm text-gray-700'>More rounded on mobile for a friendly feel, subtler on desktop</p>
      </div>
      <div class='bg-white border border-gray-200 rounded-none md:rounded-xl p-6 shadow-sm'>
        <p class='text-xs text-gray-500 mb-2'>rounded-none md:rounded-xl</p>
        <p class='text-sm text-gray-700'>Sharp edges on mobile, rounded on larger screens</p>
      </div>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Responsive button styles</h3>
    <div class='flex flex-wrap gap-3'>
      <button class='px-6 py-3 bg-blue-500 text-white rounded-full md:rounded-lg hover:bg-blue-600 text-sm'>
        Pill on mobile, normal on desktop
      </button>
      <button class='px-6 py-3 bg-purple-500 text-white rounded md:rounded-lg lg:rounded-xl hover:bg-purple-600 text-sm'>
        Scales up with breakpoints
      </button>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Hero section with responsive rounding</h3>
    <div class='bg-gradient-to-br from-indigo-500 to-purple-600 p-8 rounded-lg md:rounded-2xl lg:rounded-3xl text-white'>
      <h2 class='text-xl font-bold mb-2'>Responsive Design</h2>
      <p class='text-sm text-white/90'>This container uses rounded-lg on mobile, rounded-2xl on tablet, and rounded-3xl on desktop</p>
    </div>
  </div>
</div>

Here is why this matters: on mobile devices, screen space is limited. Larger border-radius values can make UI elements feel more approachable and touchable. But on desktop, you might want subtler rounding to maintain a more professional look.

Common responsive patterns:

Cards: rounded-2xl md:rounded-lg - friendlier on mobile, professional on desktop
Buttons: rounded-full md:rounded-lg - pill-shaped on mobile where they're easier to tap
Modals: rounded-t-2xl md:rounded-xl - bottom sheet style on mobile, standard modal on desktop
Images: rounded-none md:rounded-lg - full bleed on mobile, contained with rounding on desktop

The key is thinking about how users interact with your interface at different screen sizes and adjusting accordingly.

Real-world examples and patterns

Let me show you some complete, production-ready examples you can grab and use in your projects. These are patterns I use all the time.

<div class='max-w-4xl mx-auto space-y-8 p-4'>
  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Buttons and CTAs</h3>
    <div class='flex flex-wrap gap-3'>
      <button class='px-6 py-2 bg-blue-500 text-white text-sm rounded-full hover:bg-blue-600 transition-colors'>Pill Button</button>
      <button class='px-6 py-2 bg-purple-500 text-white text-sm rounded-lg hover:bg-purple-600 transition-colors'>Standard Button</button>
      <button class='px-6 py-2 bg-green-500 text-white text-sm rounded hover:bg-green-600 transition-colors'>Subtle Rounded</button>
      <button class='px-6 py-2 bg-gray-800 text-white text-sm rounded-none hover:bg-gray-900 transition-colors'>Sharp Edges</button>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Avatars and status indicators</h3>
    <div class='flex gap-4 items-center'>
      <div class='relative inline-block'>
        <div class='size-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white font-semibold'>JD</div>
        <span class='absolute bottom-0 right-0 size-3 bg-green-500 rounded-full border-2 border-white'></span>
      </div>
      <div class='relative inline-block'>
        <div class='size-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg'>AB</div>
        <span class='absolute bottom-0 right-0 size-4 bg-red-500 rounded-full border-2 border-white'></span>
      </div>
      <div class='relative inline-block'>
        <div class='size-20 bg-gradient-to-br from-pink-400 to-pink-600 rounded-full flex items-center justify-center text-white font-semibold text-xl'>MK</div>
        <span class='absolute bottom-1 right-1 size-4 bg-yellow-500 rounded-full border-2 border-white'></span>
      </div>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Product cards</h3>
    <div class='grid grid-cols-1 md:grid-cols-3 gap-4'>
      <div class='bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow'>
        <div class='h-40 bg-gradient-to-br from-indigo-400 to-purple-500'></div>
        <div class='p-4'>
          <h4 class='font-semibold text-gray-900 text-sm'>Premium Product</h4>
          <p class='text-gray-600 text-xs mt-1'>High quality design</p>
          <div class='flex items-center justify-between mt-3'>
            <span class='text-lg font-bold text-gray-900'>$99</span>
            <span class='px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full'>New</span>
          </div>
        </div>
      </div>
      <div class='bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow'>
        <div class='h-40 bg-gradient-to-br from-green-400 to-emerald-500'></div>
        <div class='p-4'>
          <h4 class='font-semibold text-gray-900 text-sm'>Standard Product</h4>
          <p class='text-gray-600 text-xs mt-1'>Great value option</p>
          <div class='flex items-center justify-between mt-3'>
            <span class='text-lg font-bold text-gray-900'>$49</span>
            <span class='px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full'>Sale</span>
          </div>
        </div>
      </div>
      <div class='bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow'>
        <div class='h-40 bg-gradient-to-br from-orange-400 to-red-500'></div>
        <div class='p-4'>
          <h4 class='font-semibold text-gray-900 text-sm'>Basic Product</h4>
          <p class='text-gray-600 text-xs mt-1'>Budget friendly</p>
          <div class='flex items-center justify-between mt-3'>
            <span class='text-lg font-bold text-gray-900'>$29</span>
            <span class='px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full'>Hot</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Badges and labels</h3>
    <div class='flex flex-wrap gap-2'>
      <span class='px-3 py-1 bg-blue-100 text-blue-700 text-xs rounded-full font-medium'>New</span>
      <span class='px-3 py-1 bg-green-100 text-green-700 text-xs rounded-full font-medium'>Active</span>
      <span class='px-3 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full font-medium'>Pending</span>
      <span class='px-3 py-1 bg-red-100 text-red-700 text-xs rounded-full font-medium'>Urgent</span>
      <span class='px-3 py-1 bg-purple-100 text-purple-700 text-xs rounded-lg font-medium'>Featured</span>
      <span class='px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded font-medium'>Default</span>
    </div>
  </div>

  <div class='space-y-4'>
    <h3 class='font-semibold text-gray-800 text-sm'>Notifications and alerts</h3>
    <div class='space-y-3'>
      <div class='flex items-start gap-3 bg-green-50 border border-green-200 rounded-lg p-4'>
        <div class='size-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs flex-shrink-0'>✓</div>
        <div class='flex-1'>
          <p class='text-green-900 font-medium text-sm'>Success</p>
          <p class='text-green-700 text-xs mt-1'>Your changes have been saved successfully</p>
        </div>
      </div>
      <div class='flex items-start gap-3 bg-blue-50 border border-blue-200 rounded-lg p-4'>
        <div class='size-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs flex-shrink-0'>i</div>
        <div class='flex-1'>
          <p class='text-blue-900 font-medium text-sm'>Information</p>
          <p class='text-blue-700 text-xs mt-1'>You have 3 new messages waiting for review</p>
        </div>
      </div>
      <div class='flex items-start gap-3 bg-yellow-50 border border-yellow-200 rounded-lg p-4'>
        <div class='size-6 bg-yellow-500 rounded-full flex items-center justify-center text-white text-xs flex-shrink-0'>!</div>
        <div class='flex-1'>
          <p class='text-yellow-900 font-medium text-sm'>Warning</p>
          <p class='text-yellow-700 text-xs mt-1'>Your session will expire in 5 minutes</p>
        </div>
      </div>
    </div>
  </div>
</div>

These patterns work because they follow a few simple principles:

Pill buttons (rounded-full) feel friendly and approachable, perfect for primary CTAs
Avatar circles (rounded-full) are instantly recognizable as profile pictures
Cards (rounded-xl or rounded-2xl) create visual hierarchy and group related content
Badges (rounded-full or rounded-lg) draw attention without overwhelming
Notifications (rounded-lg) balance professionalism with approachability

The border-radius you choose sends a subtle message about your brand. Sharp corners feel more corporate and serious. Rounded corners feel friendlier and more modern. And pill shapes feel playful and accessible.

That is everything you need to know about using border-radius in Tailwind CSS. From basic rounded classes to responsive designs and real-world patterns, you now have the tools to create polished, professional interfaces.

Start with the defaults (rounded, rounded-lg, rounded-full), use responsive variants when it makes sense, and don't be afraid to experiment with different values until you find what feels right for your design.

Rounding corners with Tailwind CSS border radius

The basic rounded classes

Rounding specific sides and corners

Using arbitrary values for custom radius

Responsive border-radius

Real-world examples and patterns

Other posts you might like...

Styling forms with Tailwind CSS

How to create loading spinners in Tailwind CSS

How to control line height in Tailwind CSS

Subscribe to our newsletter