ボーダーの半径と角丸
rounded-smからrounded-fullまでを使って要素の角を丸め、rounded-tl-*、rounded-br-*などで各角を個別に調整します。
「ボーダーの半径と角丸」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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.
よくある質問
「ボーダーの半径と角丸」レッスンは無料ですか？
はい。「ボーダーの半径と角丸」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「ボーダーの半径と角丸」で何を学びますか？
rounded-smからrounded-fullまでを使って要素の角を丸め、rounded-tl-*、rounded-br-*などで各角を個別に調整します。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ボーダーの半径と角丸」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ボーダーの幅と色
- ボーダーの半径と角丸
- ボックスシャドウ
- アウトラインとリングのユーティリティ