Tailwind CSS Border Radius Utilities Explained

Tailwind CSS provides a comprehensive set of utilities for controlling the border radius of elements, allowing you to quickly apply rounded corners to your designs. These utilities are prefixed with rounded- and can be customized for different sizes and corners.

Basic Border Radius Classes

• rounded-none: No border radius.

• rounded-sm: Small border radius (0.125rem or 2px).

• rounded: Default border radius (0.25rem or 4px).

• rounded-md: Medium border radius (0.375rem or 6px).

• rounded-lg: Large border radius (0.5rem or 8px).

• rounded-xl: Extra-large border radius (0.75rem or 12px).

• rounded-2xl: 2x extra-large border radius (1rem or 16px).

• rounded-3xl: 3x extra-large border radius (1.5rem or 24px).

• rounded-full: Full border radius (creates a circle or pill shape).

Example

<div class="rounded-lg bg-blue-500 p-4 text-white">
  This div has large rounded corners.
</div>

Corner-Specific Border Radius

You can target specific corners or sides by adding directional abbreviations:

• 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 Corner: rounded-tl-*

• Top Right Corner: rounded-tr-*

• Bottom Right Corner: rounded-br-*

• Bottom Left Corner: rounded-bl-*

Replace * with the desired size (e.g., none, sm, md, lg, etc.).

Example

<!-- Rounded top corners only -->
<div class="rounded-t-xl bg-green-500 p-4 text-white">
  Rounded top corners.
</div>

<!-- Rounded bottom right corner only -->
<div class="rounded-br-3xl bg-red-500 p-4 text-white">
  Rounded bottom right corner.
</div>

Custom Border Radius

Arbitrary Values

Tailwind CSS allows you to use arbitrary values for border radius using square brackets []:

<div class="rounded-[10px] bg-purple-500 p-4 text-white">
  Custom border radius of 10px.
</div>

Configuration File

To add custom named sizes, you can extend the default theme in your tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'xs': '0.0625rem', // 1px
        '4xl': '2rem',     // 32px
      },
    },
  },
};

Then use them in your classes:

<div class="rounded-xs bg-yellow-500 p-4 text-white">
  Extra small border radius.
</div>

<div class="rounded-4xl bg-pink-500 p-4 text-white">
  Extra large border radius.
</div>

Responsive Border Radius

Apply different border radius sizes at different breakpoints using responsive prefixes:

<div class="rounded-sm md:rounded-lg lg:rounded-full bg-gray-500 p-4 text-white">
  Responsive border radius.
</div>

• rounded-sm: Applied on small screens.

• md:rounded-lg: Applied on medium screens and up.

• lg:rounded-full: Applied on large screens and up.

Hover and Focus States

Change the border radius on hover or focus using state variants:

<button class="rounded bg-indigo-500 hover:rounded-full focus:rounded-none text-white px-4 py-2">
  Hover or focus me
</button>

Combining with Other Utilities

Tailwind's border radius utilities can be combined with other styling utilities for cohesive designs.

<div class="rounded-lg border-4 border-dashed border-blue-300 p-4">
  Combined with border styles.
</div>

References

• Tailwind CSS Border Radius Documentation

• Configuration Options