Rahmenradius und abgerundete Ecken
Runden Sie Ecken von Elementen mit rounded-sm bis rounded-full ab und steuern Sie einzelne Ecken mit rounded-tl-*, rounded-br-* usw.
Rahmenradius und abgerundete Ecken ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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.
Häufig gestellte Fragen
Ist die Lektion „Rahmenradius und abgerundete Ecken“ kostenlos?
Ja — der vollständige Text von „Rahmenradius und abgerundete Ecken“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Rahmenradius und abgerundete Ecken“?
Runden Sie Ecken von Elementen mit rounded-sm bis rounded-full ab und steuern Sie einzelne Ecken mit rounded-tl-*, rounded-br-* usw. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Rahmenradius und abgerundete Ecken“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Rahmenbreite und -farbe
- Rahmenradius und abgerundete Ecken
- Box-Schatten
- Outline- und Ring-Utilities