Raggio del bordo e angoli arrotondati
Arrotondi gli angoli degli elementi da rounded-sm a rounded-full e controlli i singoli angoli con rounded-tl-*, rounded-br-* e così via.
Raggio del bordo e angoli arrotondati è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Raggio del bordo e angoli arrotondati» è gratuita?
Sì — il testo completo di «Raggio del bordo e angoli arrotondati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Raggio del bordo e angoli arrotondati»?
Arrotondi gli angoli degli elementi da rounded-sm a rounded-full e controlli i singoli angoli con rounded-tl-*, rounded-br-* e così via. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Raggio del bordo e angoli arrotondati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Spessore e colore del bordo
- Raggio del bordo e angoli arrotondati
- Ombre del box
- Utility per outline e ring