Last updated: 10 March 2026

Tailwind CSS Border Radius

Apply rounded corners in Tailwind CSS with rounded-sm to rounded-full. Learn per-side rounding, responsive border radius, and custom arbitrary values.

Interactive Border Radius Playground

Try each class live and inspect the CSS output.

Utility class
rounded-lg
CSS output
border-radius: 0.5rem;

Rounded corners are a small detail that makes a UI feel considered. In Tailwind CSS, the rounded-* utilities control border radius without custom CSS. Use them to soften layouts, make components stand out, and keep your design language consistent.

This guide gives you complete control over rounded-* classes—from basics to responsive tricks, custom values, and layout patterns used in modern interfaces.

How to apply Border Radius in Tailwind CSS

Format: rounded-{size}. Tailwind ships with sm, md, lg, xl, 2xl, and full (for perfect circles).

HTML
1<div class="rounded ..."></div>
2<div class="rounded-md ..."></div>
3<div class="rounded-lg ..."></div>
4<div class="rounded-full ..."></div>

Rounded

Rounded-md

Rounded-lg

Rounded-full

Targeting Specific Corners

You don’t always want every corner rounded. Tailwind lets you target sides and single corners.

Tailwind No Rounded Button

HTML
1<button class=" border-none rounded-none....">Button</button>

Tailwind Border Pill Button

HTML
1<button type="button" class="rounded-full....">Click me</button>

Top and Bottom Only

rounded-t-* rounds the top corners. rounded-b-* rounds the bottom corners.

HTML
1<div
2	class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
3>
4	<div class="rounded-t-md bg-indigo-500 p-4">Top borders Only</div>
5</div>
Top borders Only
HTML
1<div
2	class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
3>
4	<div class="rounded-b-lg bg-indigo-500 p-4">bottom borders Only</div>
5</div>
bottom borders Only

One-Sided / Single Corner Radius

For precise control: rounded-tl-*, rounded-tr-*, and the logical versions rounded-ss-*, rounded-se-*, rounded-es-*, rounded-ee-*.

HTML
1<div
2	class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
3>
4	<div class="rounded-es-md bg-indigo-500 p-4">bottm End Start Border Only</div>
5	<div class="rounded-tr-md bg-indigo-500 p-4">Top right end border</div>
6</div>
bottm End Start Border Only
Top right end border

Responsive Border Radius

Scale corners by breakpoint like any other utility.

HTML
1<div class="bg-indigo-50 flex-1 justify-center items-center p-4 rounded-t">
2	<div
3		class=" bg-indigo-500 max-w-md text-center text-white p-3 rounded-sm md:rounded-md lg:rounded-2xl"
4	>
5		Responsive border radius
6	</div>
7</div>

Responsive border radius

Using Arbitrary Values

When you need exact values, use bracket notation.

HTML
1<div class="bg-indigo-50 p-4 space-y-5 rounded-t ">
2	<div class="bg-indigo-500 p-3 text-white text-center font-bold rounded-md">
3		6px border radius
4	</div>
5	<div
6		class=" bg-indigo-500 p-3 text-white text-center font-bold rounded-tr-3xl"
7	>
8		Top-right 1.5rem
9	</div>
10</div>

6px border radius

Top-right 1.5rem

You can use any CSS-compatible unit like em, rem, px, %.

Custom Border Radius in Tailwind Config

To maintain consistency across your project, define custom sizes in tailwind.config.js:

JS
1module.exports = {
2	theme: {
3		extend: {
4			borderRadius: {
5				card: "0.75rem",
6				cta: "1.25rem",
7			},
8		},
9	},
10};
HTML
1<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
2	<div class="flex-col bg-white p-4 rounded-card max-w-md">
3		<h1 class="font-bold text-2xl mb-2">Card</h1>
4		<p class="text-gray-500">This cards a Custom card radius</p>
5	</div>
6</div>

Card

This cards a Custom card radius

Interaction States: Hover and Focus

Radius can change on interaction like color or shadow.

HTML
1<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
2	<button
3		class="bg-indigo-500 p-3 text-white font-bold rounded-md hover:rounded-lg focus:rounded-full transition-all"
4	>
5		Hover me
6	</button>
7</div>

transition-all keeps the change smooth instead of jumpy.

Real-World UI Component Examples

Card Layout

HTML
1<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
2	<div class="rounded-lg shadow-md p-3 bg-white max-w-md pb-5">
3		<img
4			class="object-cover rounded"
5			src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8cHJvZHVjdHxlbnwwfHwwfHx8MA%3D%3D"
6		/>
7		<div class="flex-col">
8			<h1 class="font-bold my-3 text-2xl">Product Card</h1>
9			<p class="text-gray-600 my-2">
10				This describes the different aspect of the product listed to allow you
11				make better decison on whether to buy it or not.
12			</p>
13			<span class="flex my-2 text-gray-800 font-medium">$23</span>
14			<button
15				class="bg-indigo-500 w-full text-center font-bold text-white rounded-2xl py-2"
16			>
17				Buy
18			</button>
19		</div>
20	</div>
21</div>

Product Card

This describes the different aspect of the product listed to allow you make better decison on whether to buy it or not.

$23

Rounded corners make the card visually distinct and tactile.

Avatar Image

HTML
1<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
2	<div class="rounded-lg shadow-md p-3 bg-white max-w-md pb-5">
3		<img
4			src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D"
5			class="w-24 h-24 rounded-full"
6		/>
7	</div>
8</div>

Perfect for circular profile photos or initials.

Modal Header

HTML
1<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
2	<div class="rounded-lg shadow-md p-3 bg-white max-w-md pb-5">
3		<div class="rounded-t-lg bg-indigo-400 p-4 text-white font-bold">
4			Modal Title
5		</div>
6	</div>
7</div>

Modal Title

Top corners only for modals that sit on rectangular content areas.

Best Practices

  • Prefer semantic rounded-* sizes before jumping to arbitrary values.

  • Define tokens in your config to keep a consistent system.

  • Use rounded-none to reset unwanted rounding in nested UIs.

  • Pair with shadow-* or ring-* for depth.

  • Animate radius changes on hover/focus with transition-*.

Tailwind Border Radius classes and Properties

ClassProperties
rounded-noneborder-radius: 0px;
rounded-smborder-radius: 0.125rem; 2px
roundedborder-radius: 0.25rem; 4px
rounded-mdborder-radius: 0.375rem; 6px
rounded-lgborder-radius: 0.5rem; 8px
rounded-xlborder-radius: 0.75rem; 12px
rounded-2xlborder-radius: 1rem; 16px
rounded-3xlborder-radius: 1.5rem; 24px
rounded-fullborder-radius: 9999px;
rounded-s-noneborder-start-start-radius: 0px;
border-end-start-radius: 0px;
rounded-s-smborder-start-start-radius: 0.125rem;
border-end-start-radius: 0.125rem;
rounded-sborder-start-start-radius: 0.25rem;
border-end-start-radius: 0.25rem;
rounded-s-mdborder-start-start-radius: 0.375rem;
border-end-start-radius: 0.375rem;
rounded-s-lgborder-start-start-radius: 0.5rem;
border-end-start-radius: 0.5rem;
rounded-s-xlborder-start-start-radius: 0.75rem;
border-end-start-radius: 0.75rem;
rounded-s-2xlborder-start-start-radius: 1rem;
border-end-start-radius: 1rem;
rounded-s-3xlborder-start-start-radius: 1.5rem;
border-end-start-radius: 1.5rem;
rounded-s-fullborder-start-start-radius: 9999px;
border-end-start-radius: 9999px;
rounded-e-noneborder-start-end-radius: 0px;
border-end-end-radius: 0px;
rounded-e-smborder-start-end-radius: 0.125rem;
border-end-end-radius: 0.125rem;
rounded-eborder-start-end-radius: 0.25rem;
border-end-end-radius: 0.25rem;
rounded-e-mdborder-start-end-radius: 0.375rem;
border-end-end-radius: 0.375rem;
rounded-e-lgborder-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
rounded-e-xlborder-start-end-radius: 0.75rem;
border-end-end-radius: 0.75rem;
rounded-e-2xlborder-start-end-radius: 1rem;
border-end-end-radius: 1rem;
rounded-e-3xlborder-start-end-radius: 1.5rem;
border-end-end-radius: 1.5rem;
rounded-e-fullborder-start-end-radius: 9999px;
border-end-end-radius: 9999px;
rounded-t-noneborder-top-left-radius: 0px;
border-top-right-radius: 0px;
rounded-t-smborder-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
rounded-tborder-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
rounded-t-mdborder-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
rounded-t-lgborder-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
rounded-t-xlborder-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
rounded-t-2xlborder-top-left-radius: 1rem;
border-top-right-radius: 1rem;
rounded-t-3xlborder-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
rounded-t-fullborder-top-left-radius: 9999px;
border-top-right-radius: 9999px;
rounded-r-noneborder-top-right-radius: 0px;
border-bottom-right-radius: 0px;
rounded-r-smborder-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
rounded-rborder-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
rounded-r-mdborder-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
rounded-r-lgborder-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
rounded-r-xlborder-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
rounded-r-2xlborder-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
rounded-r-3xlborder-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
rounded-r-fullborder-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
rounded-b-noneborder-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
rounded-b-smborder-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
rounded-bborder-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
rounded-b-mdborder-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
rounded-b-lgborder-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
rounded-b-xlborder-bottom-right-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
rounded-b-2xlborder-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
rounded-b-3xlborder-bottom-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
rounded-b-fullborder-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-l-noneborder-top-left-radius: 0px;
border-bottom-left-radius: 0px;
rounded-l-smborder-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
rounded-lborder-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
rounded-l-mdborder-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
rounded-l-lgborder-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
rounded-l-xlborder-top-left-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
rounded-l-2xlborder-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
rounded-l-3xlborder-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
rounded-l-fullborder-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-ss-noneborder-start-start-radius: 0px;
rounded-ss-smborder-start-start-radius: 0.125rem; 2px
rounded-ssborder-start-start-radius: 0.25rem; 4px
rounded-ss-mdborder-start-start-radius: 0.375rem; 6px
rounded-ss-lgborder-start-start-radius: 0.5rem; 8px
rounded-ss-xlborder-start-start-radius: 0.75rem; 12px
rounded-ss-2xlborder-start-start-radius: 1rem; 16px
rounded-ss-3xlborder-start-start-radius: 1.5rem; 24px
rounded-ss-fullborder-start-start-radius: 9999px;
rounded-se-noneborder-start-end-radius: 0px;
rounded-se-smborder-start-end-radius: 0.125rem; 2px
rounded-seborder-start-end-radius: 0.25rem; 4px
rounded-se-mdborder-start-end-radius: 0.375rem; 6px
rounded-se-lgborder-start-end-radius: 0.5rem; 8px
rounded-se-xlborder-start-end-radius: 0.75rem; 12px
rounded-se-2xlborder-start-end-radius: 1rem; 16px
rounded-se-3xlborder-start-end-radius: 1.5rem; 24px
rounded-se-fullborder-start-end-radius: 9999px;
rounded-ee-noneborder-end-end-radius: 0px;
rounded-ee-smborder-end-end-radius: 0.125rem; 2px
rounded-eeborder-end-end-radius: 0.25rem; 4px
rounded-ee-mdborder-end-end-radius: 0.375rem; 6px
rounded-ee-lgborder-end-end-radius: 0.5rem; 8px
rounded-ee-xlborder-end-end-radius: 0.75rem; 12px
rounded-ee-2xlborder-end-end-radius: 1rem; 16px
rounded-ee-3xlborder-end-end-radius: 1.5rem; 24px
rounded-ee-fullborder-end-end-radius: 9999px;
rounded-es-noneborder-end-start-radius: 0px;
rounded-es-smborder-end-start-radius: 0.125rem; 2px
rounded-esborder-end-start-radius: 0.25rem; 4px
rounded-es-mdborder-end-start-radius: 0.375rem; 6px
rounded-es-lgborder-end-start-radius: 0.5rem; 8px
rounded-es-xlborder-end-start-radius: 0.75rem; 12px
rounded-es-2xlborder-end-start-radius: 1rem; 16px
rounded-es-3xlborder-end-start-radius: 1.5rem; 24px
rounded-es-fullborder-end-start-radius: 9999px;
rounded-tl-noneborder-top-left-radius: 0px;
rounded-tl-smborder-top-left-radius: 0.125rem; 2px
rounded-tlborder-top-left-radius: 0.25rem; 4px
rounded-tl-mdborder-top-left-radius: 0.375rem; 6px
rounded-tl-lgborder-top-left-radius: 0.5rem; 8px
rounded-tl-xlborder-top-left-radius: 0.75rem; 12px
rounded-tl-2xlborder-top-left-radius: 1rem; 16px
rounded-tl-3xlborder-top-left-radius: 1.5rem; 24px
rounded-tl-fullborder-top-left-radius: 9999px;
rounded-tr-noneborder-top-right-radius: 0px;
rounded-tr-smborder-top-right-radius: 0.125rem; 2px
rounded-trborder-top-right-radius: 0.25rem; 4px
rounded-tr-mdborder-top-right-radius: 0.375rem; 6px
rounded-tr-lgborder-top-right-radius: 0.5rem; 8px
rounded-tr-xlborder-top-right-radius: 0.75rem; 12px
rounded-tr-2xlborder-top-right-radius: 1rem; 16px
rounded-tr-3xlborder-top-right-radius: 1.5rem; 24px
rounded-tr-fullborder-top-right-radius: 9999px;
rounded-br-noneborder-bottom-right-radius: 0px;
rounded-br-smborder-bottom-right-radius: 0.125rem; 2px
rounded-brborder-bottom-right-radius: 0.25rem; 4px
rounded-br-mdborder-bottom-right-radius: 0.375rem; 6px
rounded-br-lgborder-bottom-right-radius: 0.5rem; 8px
rounded-br-xlborder-bottom-right-radius: 0.75rem; 12px
rounded-br-2xlborder-bottom-right-radius: 1rem; 16px
rounded-br-3xlborder-bottom-right-radius: 1.5rem; 24px
rounded-br-fullborder-bottom-right-radius: 9999px;
rounded-bl-noneborder-bottom-left-radius: 0px;
rounded-bl-smborder-bottom-left-radius: 0.125rem; 2px
rounded-blborder-bottom-left-radius: 0.25rem; 4px
rounded-bl-mdborder-bottom-left-radius: 0.375rem; 6px
rounded-bl-lgborder-bottom-left-radius: 0.5rem; 8px
rounded-bl-xlborder-bottom-left-radius: 0.75rem; 12px
rounded-bl-2xlborder-bottom-left-radius: 1rem; 16px
rounded-bl-3xlborder-bottom-left-radius: 1.5rem; 24px
rounded-bl-fullborder-bottom-left-radius: 9999px;

✨ What's Next?

Now that you’ve mastered Tailwind Border radius, try experimenting with:

Windframe Tailwind blocks

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe