Kantlinjeradie och rundade hörn
Runda elementens hörn med rounded-sm till rounded-full och styr enskilda hörn med rounded-tl-*, rounded-br-* och liknande.
Kantlinjeradie och rundade hörn är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Rundade hörn i Tailwind
Rundade hörn är en av de vanligaste visuella stilarna i modern UI-design. De mjukar upp skarpa kanter och gör gränssnitt mer lättillgängliga. Tailwinds hjälpklasser för rounded-* använder CSS-egenskapen border-radius med en konsekvent namnskala, från knappt märkbar rundning till perfekta cirklar. De fungerar på alla element och kan kombineras med kantlinjer, skuggor och bakgrunder.
<!-- 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>Skalan för rounded
Tailwinds skala för rounded innehåller semantiska namn som motsvarar successivt större radier: rounded-sm (2 px), rounded (4 px), rounded-md (6 px), rounded-lg (8 px), rounded-xl (12 px), rounded-2xl (16 px) och rounded-3xl (24 px). Större värden som rounded-xl och rounded-2xl är vanliga för kort och modaler i moderna designsystem.
<!-- 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 för piller och cirklar
rounded-full använder en kantlinjeradie på 9999 px, vilket i praktiken gör elementet pillerformat eller cirkulärt beroende på dess mått. På ett element med samma bredd och höjd skapas en perfekt cirkel – perfekt för avatarer och ikonbehållare. På ett brett, platt element som en etikett skapas den pillerform som är vanlig för taggar och statusindikatorer.
<!-- 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 för att ta bort rundning
rounded-none anger uttryckligen border-radius: 0 och tar bort all rundning. Detta är särskilt användbart när du behöver åsidosätta en rundning som har angetts på en överordnad nivå, eller när du bygger komponenter som mobilbanderoller i full bredd och kant-till-kant-bilder i sidhuvuden som ska ha raka hörn. Det används också i responsiva mönster där hörnen ska vara raka på mobiler men rundade på större skärmar.
<!-- 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>Styra enskilda hörn
Du kan avrunda enskilda hörn med riktningsspecifika verktyg: rounded-tl-* (övre vänster), rounded-tr-* (övre höger), rounded-br-* (nedre höger) och rounded-bl-* (nedre vänster). De använder samma storleksskala som de fullständiga verktygen rounded-*. Att blanda olika hörnradier är vanligt i tabbkomponenter, där endast de övre hörnen avrundas så att fliken ansluter sömlöst till en innehållspanel nedanför.
<!-- 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>Avrundning av övre och nedre hörnpar
Tailwind tillhandahåller kortnotationer för att avrunda det övre eller nedre hörnparet: rounded-t-* avrundar både det övre vänstra och det övre högra hörnet, medan rounded-b-* avrundar båda nedre hörnen. På motsvarande sätt avrundar rounded-l-* de vänstra hörnen och rounded-r-* de högra hörnen. Dessa kortnotationer minskar mängden kod när samma radie ska tillämpas på två intilliggande hörn.
<!-- 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>Anpassade värden för hörnradie
När den inbyggda skalan inte passar ditt designsystem kan du använda godtyckliga värden inom hakparenteser: rounded-[10px] eller rounded-[50%]. Du kan även använda procentvärden för verkligt ovala former: rounded-[50%] på ett element som inte är kvadratiskt skapar en ellips. Dessa godtyckliga värden kompileras vid behov av JIT-motorn, så det medför ingen prestandakostnad att använda dem.
<!-- 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>Avrundade hörn med dolt överflöd
När underordnade element, till exempel bilder, inuti en förälder med avrundade hörn sticker ut över hörnen ser det ut som att hörnen beskärs. Lägg till overflow-hidden på förälderelementet för att tvinga fram avrundningen även på det underordnade innehållet. Detta är viktigt för kort med bilder, förloppsindikatorer inuti avrundade behållare och avatarbilder som måste hålla sig inom cirkulära gränser utan att enbart använda object-fit.
<!-- 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>Avrundade hörn på knappar
Avrundningen av knappar är ett av de mest betydelsefulla visuella valen i ett designsystem. Rektangulära knappar känns formella och företagsmässiga, måttligt avrundade knappar (rounded-lg) känns moderna och rena, och helt pillerformade knappar (rounded-full) känns vänliga och lättillgängliga. De flesta designsystem standardiserar på ett eller två radievärden för konsekvensens skull – Tailwind gör det enkelt att tillämpa detta på alla knappar.
<!-- 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>Responsiv hörnspecifik avrundning
Genom att kombinera responsiva prefix med hörnspecifik avrundning kan du skapa layouter som smidigt anpassas mellan olika skärmstorlekar. Ett kort i full bredd på mobil kan sakna avrundning, medan det på dator flyter som ett avgränsat kort med alla hörn avrundade. Mönstret rounded-none sm:rounded-xl använder radien noll på mobiler och 12 px på små skärmar och större.
<!-- 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>Avrundning i verkliga UI-mönster
Här är en komplett varningskomponent som använder riktningsspecifik avrundning tillsammans med kant- och bakgrundsfärger. Den färgade accentlisten till vänster använder rounded-l-full för en avrundad vänsterkant, medan själva varningsmeddelandet använder rounded-r-xl för att endast avrunda höger sida – vilket skapar en pillerformad accentdesign som är vanlig i aviseringssystem och toastmeddelanden.
<!-- 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>Snabbkontroll
Testa dina kunskaper om begreppen i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har du lärt dig att: rounded-sm till rounded-3xl ger en storleksskala för border-radius, rounded-full skapar cirklar på kvadratiska element och pillerformer på breda element, och rounded-t-*, rounded-b-* samt verktyg för enskilda hörn ger exakt kontroll över vilka hörn som avrundas. Härnäst utforskar vi verktyg för boxskuggor som ger djup.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Kantlinjeradie och rundade hörn” gratis?
Ja – hela texten till ”Kantlinjeradie och rundade hörn” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Kantlinjeradie och rundade hörn”?
Runda elementens hörn med rounded-sm till rounded-full och styr enskilda hörn med rounded-tl-*, rounded-br-* och liknande. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Kantlinjeradie och rundade hörn”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Kantlinjens bredd och färg
- Kantlinjeradie och rundade hörn
- Lådor med skuggor
- Verktyg för konturer och ringar