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.

```html

  Default Rounded


  Large Rounded


  Fully Rounded


```

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

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.

```html


  
    Active Tab
  
  
    Inactive Tab
  



  Hey there! This is a message.



  
  

    
Card Title
  

```

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.

```html


  10px radius



  Scales with viewport



  25% radius



  Custom rem value

```

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.

```html


  Card content



  Click me



  Badge or tag



  Flexible card design

```

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.

```html


  Get Started



  

    
  
  



  
  

    
Product Name
    
Product description
    
      New
    
  



  

    ✓
  
  
Successfully saved!

```

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.