Tailwind Border-Radius Cheatsheet (v3.5)

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.

Tailwind CSS ships dozens of border‑radius helpers. This cheatsheet collects them all, adds real‑time previews, and highlights the new logical utilities (`rounded-s-*`, rounded-e-*) introduced in v3.4+.

Live Border‑Radius Playground

Drag the slider or type a custom value to see corners round in real time.

Quick Reference Table

Logical Corner Helpers (2025+)

Modern browsers support logical corners that flip based on writing direction. Tailwind 3.4 added two sets:

• rounded-s-*: affects the start side (left in LTR, right in RTL)

• rounded-e-*: affects the end side (right in LTR, left in RTL)

Examples:

<div class="rounded-s-lg bg-pink-200 p-4">Start side rounded</div>
<div class="rounded-e-full bg-blue-200 p-4 mt-2">End side pill</div>

Component Demos Using rounded-*

• 💳 Cards: Glassmorphic Card → tailkits.com/components/glassmorphic-card/

• 📦 Badges: Pill Badge → tailkits.com/components/pill-badge/

• 🖼️ Avatars: Circular Avatar Stack → tailkits.com/components/avatar-card

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>

FAQ

What is the default rounded value in Tailwind?

Tailwind’s default border‑radius scale starts at `rounded` = `0.25rem` (4 px). Use `rounded-none` to reset.

How do I set custom radius?

Add arbitrary values like `rounded-[3rem]` or extend the `borderRadius` section of `tailwind.config.js`