Border Radius and Rounded Corners
Round element corners with rounded-sm through rounded-full, and control individual corners with rounded-tl-*, rounded-br-*, etc.
Border Radius and Rounded Corners is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Rounded Corners in Tailwind
Rounded corners are one of the most frequently applied visual styles in modern UI design. They soften hard edges and make interfaces feel more approachable. Tailwind's rounded-* utilities apply CSS border-radius with a consistent naming scale from barely perceptible rounding to perfect circles. They work on any element and compose with borders, shadows, and backgrounds.
<!-- Rounded corner scale preview -->
<div class="flex gap-3 flex-wrap">
<div class="w-16 h-16 bg-blue-200 rounded-sm">sm</div>
<div class="w-16 h-16 bg-blue-300 rounded">base</div>
<div class="w-16 h-16 bg-blue-400 rounded-md">md</div>
<div class="w-16 h-16 bg-blue-500 rounded-lg">lg</div>
<div class="w-16 h-16 bg-blue-600 text-white rounded-xl">xl</div>
<div class="w-16 h-16 bg-blue-700 text-white rounded-2xl">2xl</div>
<div class="w-16 h-16 bg-blue-800 text-white rounded-3xl">3xl</div>
</div>The rounded Scale
Tailwind's rounded scale provides semantic names that correspond to progressively larger radii: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), and rounded-3xl (24px). Larger values like rounded-xl and rounded-2xl are common for cards and modals in contemporary design systems.
<!-- Cards using common rounded values -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-white border p-4 rounded-md shadow-sm">
rounded-md (6px)
</div>
<div class="bg-white border p-4 rounded-xl shadow-md">
rounded-xl (12px)
</div>
<div class="bg-white border p-4 rounded-2xl shadow-lg">
rounded-2xl (16px)
</div>
</div>rounded-full for Pills and Circles
rounded-full applies a border-radius of 9999px, which effectively makes any element pill-shaped or circular depending on its dimensions. On an element with equal width and height, it creates a perfect circle — perfect for avatars and icon containers. On a wide, flat element like a badge, it creates the pill shape common in tag and status indicators.
<!-- Circles and pills with rounded-full -->
<div class="flex gap-4 items-center">
<!-- Circle avatar -->
<div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">
JD
</div>
<!-- Pill badge -->
<span class="rounded-full bg-green-100 text-green-800 px-3 py-1 text-sm font-medium">
Active
</span>
<!-- Pill button -->
<button class="rounded-full bg-blue-500 text-white px-6 py-2">
Subscribe
</button>
</div>rounded-none to Remove Rounding
rounded-none explicitly sets border-radius: 0, removing any rounding. This is most useful when you need to override a rounding applied at a parent level, or when building components like full-width mobile banners and edge-to-edge header images that should have square corners. It is also used in responsive patterns where corners should be square on mobile but rounded on desktop.
<!-- Square on mobile, rounded on tablet+ -->
<div class="bg-indigo-500 text-white p-6 rounded-none sm:rounded-xl max-w-sm">
<h2 class="text-xl font-bold">Promo Card</h2>
<p class="mt-2 opacity-80">Square corners on mobile, rounded on tablet.</p>
</div>Individual Corner Control
You can round individual corners using directional utilities: rounded-tl-* (top-left), rounded-tr-* (top-right), rounded-br-* (bottom-right), and rounded-bl-* (bottom-left). These accept the same size scale as the full rounded-* utilities. Mixing corners is common in tab components, where only the top corners are rounded to attach seamlessly to a content panel below.
<!-- Tab with only top corners rounded -->
<div class="inline-flex">
<button class="bg-white border border-b-0 border-gray-200 px-4 py-2 font-medium text-blue-600 rounded-tl-lg rounded-tr-lg">
Active Tab
</button>
<button class="bg-gray-100 border border-gray-200 px-4 py-2 text-gray-500 rounded-tl-lg rounded-tr-lg">
Other Tab
</button>
</div>
<div class="border border-gray-200 p-4 rounded-b-lg rounded-tr-lg">
Tab content here
</div>Top and Bottom Half Rounding
Tailwind provides shorthand utilities for rounding the top pair or bottom pair of corners: rounded-t-* rounds both top-left and top-right, rounded-b-* rounds both bottom corners. Similarly, rounded-l-* rounds the left corners and rounded-r-* rounds the right corners. These shorthands reduce verbosity when applying the same radius to two adjacent corners.
<!-- Image card: top rounded for image, bottom rounded for body -->
<div class="max-w-xs overflow-hidden">
<!-- Only top corners rounded -->
<div class="h-36 bg-gradient-to-r from-teal-400 to-cyan-600 rounded-t-2xl"></div>
<!-- Only bottom corners rounded -->
<div class="bg-white border border-t-0 rounded-b-2xl p-4">
<h3 class="font-bold">Card Title</h3>
<p class="text-sm text-gray-500 mt-1">Description text here.</p>
</div>
</div>Custom Border Radius Values
When the built-in scale does not match your design system, use arbitrary values with square brackets: rounded-[10px] or rounded-[50%]. You can also use percentage values for truly oval shapes: rounded-[50%] on a non-square element creates an ellipse. These arbitrary values are compiled by the JIT engine on demand, so there is no performance cost for using them.
<!-- Custom radius values -->
<div class="flex gap-4 flex-wrap">
<!-- Exact pixel value -->
<div class="w-20 h-20 bg-rose-300 rounded-[10px] flex items-center justify-center text-xs">
10px
</div>
<!-- Ellipse with 50% -->
<div class="w-32 h-16 bg-purple-300 rounded-[50%] flex items-center justify-center text-sm">
Ellipse
</div>
<!-- Different radius per axis -->
<div class="w-24 h-16 bg-amber-300 rounded-[40px_10px] flex items-center justify-center text-xs">
Mixed
</div>
</div>Rounded Corners With Overflow Hidden
When child elements (like images) inside a rounded parent overflow the rounded corners, the corners appear to clip. To enforce the rounding on child content, add overflow-hidden to the parent. This is essential for cards with images, progress bars inside rounded containers, and avatar images that must stay within circular bounds without using object-fit alone.
<!-- overflow-hidden enforces rounded corners on child image -->
<div class="w-32 h-32 rounded-2xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200"
alt="Avatar"
class="w-full h-full object-cover"
/>
</div>
<!-- Without overflow-hidden, corners would not clip the image -->
<div class="w-32 h-32 rounded-2xl border border-red-500" style="display:inline-block;">
<img
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200"
alt="No clip"
class="w-full h-full object-cover"
/>
</div>Rounded Corners in Buttons
Button rounding is one of the most impactful visual choices in a design system. Rectangular buttons feel formal and corporate, moderately rounded (rounded-lg) feel modern and clean, and full pill buttons (rounded-full) feel friendly and approachable. Most design systems standardize on one or two radius values for consistency — Tailwind makes it easy to enforce this across all buttons.
<!-- Button rounding spectrum -->
<div class="flex gap-3 flex-wrap">
<button class="bg-blue-500 text-white px-4 py-2 rounded-none">Square</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded">Base</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded-md">MD</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">LG</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded-xl">XL</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded-full">Pill</button>
</div>Corner-Specific Responsive Rounding
Combining responsive prefixes with corner-specific rounding allows for layouts that smoothly transition across screen sizes. A full-width mobile card might have no rounding, while on desktop it floats as a contained card with all corners rounded. The pattern rounded-none sm:rounded-xl applies zero radius on mobile and 12px on small screens and up.
<!-- Full-bleed on mobile, contained card on desktop -->
<div class="bg-white shadow-md rounded-none sm:rounded-2xl overflow-hidden">
<div class="h-40 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="p-5">
<h3 class="text-lg font-bold">Responsive Card</h3>
<p class="text-gray-600 mt-2">No rounding on mobile, rounded on sm breakpoint and above.</p>
</div>
</div>Rounding in Real UI Patterns
Here is a complete alert component that uses directional rounding alongside border and background colors. The colored left accent bar uses rounded-l-full for a rounded left edge, while the main alert body uses rounded-r-xl to round only the right side — creating a pill accent design common in notification systems and toast messages.
<!-- Alert with accent bar using directional rounding -->
<div class="flex overflow-hidden rounded-xl border border-blue-200 shadow-sm max-w-md">
<!-- Colored left accent bar -->
<div class="w-2 bg-blue-500 rounded-l-xl"></div>
<!-- Content area -->
<div class="flex-1 bg-blue-50 p-4">
<p class="font-semibold text-blue-800">Information</p>
<p class="text-blue-700 text-sm mt-1">
Your settings have been saved successfully.
</p>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: rounded-sm through rounded-3xl provide a size scale for border-radius, rounded-full creates circles on square elements and pill shapes on wide elements, and rounded-t-*, rounded-b-*, and individual corner utilities allow precise control over which corners are rounded. Next up we explore box shadow utilities for adding depth.
Frequently asked questions
Is the “Border Radius and Rounded Corners” lesson free?
Yes — the full text of “Border Radius and Rounded Corners” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Border Radius and Rounded Corners”?
Round element corners with rounded-sm through rounded-full, and control individual corners with rounded-tl-*, rounded-br-*, etc. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Border Radius and Rounded Corners” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Border Width and Color
- Border Radius and Rounded Corners
- Box Shadows
- Outline and Ring Utilities