Kantlinjebredde og -farge
Legg til kantlinjer med border-*-verktøy for bredde, angi fargen med border-{color}-{shade}, og kontroller individuelle sider.
Kantlinjebredde og -farge er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Legge til kantlinjer med Tailwind
Kantlinjer skiller elementer visuelt, avgrenser skjemafelt og gir kortoppsett struktur. Tailwind tilbyr verktøyfamilien border for å styre bredde, farge, stil og individuelle sider – alt uten å skrive egendefinert CSS. Basisklassen border bruker en 1 px heltrukken kantlinje i den gjeldende kantlinjefargen, og gir et ryddig utgangspunkt for alle komponenter med kantlinjer.
<!-- Simple bordered card -->
<div class="border border-gray-200 rounded-lg p-4 max-w-sm">
<h3 class="font-semibold">Card Title</h3>
<p class="text-gray-600 mt-2">Card content with a simple border.</p>
</div>Verktøyklasser for kantlinjebredde
Tailwinds verktøyklasser for kantlinjebredde styrer tykkelsen: border (1 px), border-2 (2 px), border-4 (4 px) og border-8 (8 px). Klassen border uten tall angir en bredde på 1 px. De kan også bruke border-0 for å fjerne en kantlinje eksplisitt – nyttig når en kantlinje arves fra en grunnstil som De vil undertrykke.
<!-- Different border widths -->
<div class="space-y-3">
<div class="border p-3 rounded">border (1px)</div>
<div class="border-2 p-3 rounded">border-2 (2px)</div>
<div class="border-4 p-3 rounded">border-4 (4px)</div>
<div class="border-8 p-3 rounded">border-8 (8px)</div>
</div>Kantlinjer på individuelle sider
De kan bruke kantlinjer på individuelle sider med retningsvarianter: border-t (øverst), border-r (høyre), border-b (nederst) og border-l (venstre). Disse brukes ofte til navigasjonslenker med kantlinje nederst, fremhevede linjer til venstre for sitatblokker og skillelinjer øverst mellom listeelementer. Kombiner dem fritt – border-t border-b legger bare til vannrette kantlinjer.
<!-- Single-side borders for different effects -->
<div class="space-y-4">
<!-- Bottom border only — navigation tab style -->
<div class="border-b-2 border-blue-500 pb-2 font-semibold">Active Tab</div>
<!-- Left border — blockquote accent -->
<blockquote class="border-l-4 border-indigo-500 pl-4 text-gray-600 italic">
A meaningful quote with a left accent border.
</blockquote>
<!-- Top and bottom borders — horizontal rule effect -->
<div class="border-t border-b border-gray-200 py-3 text-center">Divider</div>
</div>Verktøyklasser for kantlinjefarge
Kantlinjefarger følger Tailwinds fargepalett med mønsteret border-{color}-{shade}, for eksempel border-blue-500 eller border-gray-200. Hvis ingen kantlinjefarge angis, bruker Tailwind standardfargen, som vanligvis er en lys gråfarge. Ved å angi en eksplisitt farge kan kantlinjene formidle semantisk betydning – rødt for feil, grønt for suksess, blått for fokus og nøytralt grått for struktur.
<!-- Semantic border colors -->
<div class="space-y-3">
<div class="border-2 border-blue-500 rounded p-3">Info (blue border)</div>
<div class="border-2 border-green-500 rounded p-3">Success (green border)</div>
<div class="border-2 border-yellow-500 rounded p-3">Warning (yellow border)</div>
<div class="border-2 border-red-500 rounded p-3">Error (red border)</div>
</div>Standard kontra egendefinert kantlinjefarge
Tailwind angir en global standardfarge for kantlinjer i basestilene, så en vanlig border har allerede en farge. De kan overstyre denne standarden globalt i theme.borderColor.DEFAULT i konfigurasjonen. På komponentnivå legger De ganske enkelt til en valgfri border-*-klasse for kantlinjefarge. Mønsteret border border-gray-200 er svært vanlig – en ren, 1 px lys grå kantlinje som gir diskret struktur.
<!-- The most common border pattern: 1px gray -->
<div class="grid grid-cols-2 gap-4">
<div class="border border-gray-200 rounded-lg p-4">
<span class="font-medium">Default gray border</span>
</div>
<div class="border border-gray-300 rounded-lg p-4">
<span class="font-medium">Slightly darker gray</span>
</div>
</div>Kantlinjefarge med gjennomsiktighet
Bruk modifikatoren for gjennomsiktighet etter skråstreken for å gjøre kantlinjer delvis gjennomsiktige: border-blue-500/50 gir en blå kantlinje med 50 % gjennomsiktighet. Dette er nyttig for diskrete lagdelingseffekter der en heltrukken kantlinje ville blitt for kraftig, mens en lysere nyanse ville endret fargetonen. Delvis gjennomsiktige kantlinjer er vanlige på glassmorfiske UI-kort, frostede navigasjonsfelt og gjennomskinnelige komponenter som legges over annet innhold.
<!-- Glass card with semi-transparent border -->
<div class="bg-white/10 backdrop-blur border border-white/30 rounded-2xl p-6 max-w-sm" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.3);">
<h3 class="text-white font-bold">Glass Card</h3>
<p class="text-white/80 mt-2">Semi-transparent border on a frosted glass card.</p>
</div>Verktøyklasser for kantlinjestil
I tillegg til heltrukne kantlinjer tilbyr Tailwind border-dashed, border-dotted, border-double og border-none for å styre det visuelle utseendet til kantlinjen. Stiplede kantlinjer brukes ofte i slippområder for opplasting og plassholderseksjoner. Prikkede kantlinjer vises i brødsmulestier og eldre brukergrensesnittmønstre. border-none fjerner kantlinjen fullstendig og overstyrer nedarvede stiler.
<!-- Border style examples -->
<div class="space-y-3">
<div class="border-2 border-solid border-gray-400 p-3 rounded">Solid</div>
<div class="border-2 border-dashed border-blue-400 p-3 rounded">
Dashed — great for drag-and-drop zones
</div>
<div class="border-2 border-dotted border-purple-400 p-3 rounded">Dotted</div>
<div class="border-4 border-double border-green-400 p-3 rounded">Double</div>
</div>Snarveier for kantlinjer på X- og Y-aksen
For å legge kantlinjer på begge vannrette sider, øverst og nederst, eller begge loddrette sider, venstre og høyre, samtidig, bruker De border-x og border-y. border-x angir kantlinjer til venstre og høyre, mens border-y angir kantlinjer øverst og nederst. Disse er kortere enn å skrive to separate retningsklasser, og formidler tydelig hensikten i HTML-koden.
<!-- border-x and border-y shortcuts -->
<div class="space-y-4">
<!-- Left and right borders only -->
<div class="border-x-2 border-indigo-500 px-4 py-2">
border-x: left + right borders
</div>
<!-- Top and bottom borders only -->
<div class="border-y border-gray-300 py-3">
border-y: top + bottom borders
</div>
</div>Responsive kantlinjer og kantlinjer for tilstander
Kantlinjeverktøy fungerer med responsive prefikser og tilstandsvarianter. Et vanlig mønster er border-b-2 border-transparent hover:border-blue-500 for navigasjonslenker med animert understrek – kantlinjen er alltid til stede, noe som hindrer layoutforskyvning, men er gjennomsiktig frem til pekeren holdes over lenken. Denne teknikken lager en jevn understrek som ikke får innholdet til å hoppe, og som vises ved pekerbevegelse uten JavaScript.
<!-- Animated underline navigation links -->
<nav class="flex gap-6 p-4">
<a href="#" class="border-b-2 border-transparent hover:border-blue-500 pb-1 text-gray-700 hover:text-blue-600 transition-colors">
Home
</a>
<a href="#" class="border-b-2 border-blue-500 pb-1 text-blue-600 font-medium">
Active Link
</a>
<a href="#" class="border-b-2 border-transparent hover:border-blue-500 pb-1 text-gray-700 hover:text-blue-600 transition-colors">
About
</a>
</nav>Divide-verktøy for underordnede elementer
I stedet for å legge til border-b på alle underordnede elementer unntatt det siste, kan De bruke divide-y på foreldreelementet. Tailwinds divide-y-*-verktøy legger automatisk til en øvre kantlinje på alle underordnede elementer unntatt det første, og lager tydelig adskilte listeelementer. divide-x-* gjør det samme vannrett. Kombiner med divide-gray-200 for å angi fargen på skillelinjene.
<!-- List with automatic dividers using divide utilities -->
<ul class="divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
<li class="flex items-center gap-3 p-4 hover:bg-gray-50">
<div class="w-8 h-8 rounded-full bg-blue-400"></div>
<span>Alice Johnson</span>
</li>
<li class="flex items-center gap-3 p-4 hover:bg-gray-50">
<div class="w-8 h-8 rounded-full bg-green-400"></div>
<span>Bob Smith</span>
</li>
<li class="flex items-center gap-3 p-4 hover:bg-gray-50">
<div class="w-8 h-8 rounded-full bg-purple-400"></div>
<span>Carol Davis</span>
</li>
</ul>Kantlinjer i skjemafelt
Skjemafelt bruker kantlinjer som den viktigste visuelle indikasjonen på at de er interaktive. Standardmønsteret er border border-gray-300 focus:border-blue-500, med en ring for bedre synlighet ved fokus: focus:ring-2 focus:ring-blue-500/20. Ved feiltilstander bytter De betinget til border-red-500. Denne kombinasjonen gir tilgjengelige og visuelt tydelige skjemafelt som oppfyller WCAG-kravene til fokusindikatorer.
<!-- Form fields with semantic borders -->
<div class="space-y-4 max-w-sm">
<!-- Default state -->
<input
type="text"
placeholder="Default input"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
/>
<!-- Error state -->
<input
type="text"
placeholder="Error input"
class="w-full border border-red-500 rounded-lg px-4 py-2 bg-red-50 focus:outline-none"
/>
<p class="text-red-600 text-sm">This field is required</p>
</div>Kort kontroll
Test forståelsen Deres av konseptene fra Tailwind CSS Mastery i denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at verktøyklasser av typen border-{width}, fra border (1 px) til border-8, styrer tykkelsen, at retningsklasser som border-t, border-b og border-x legger kantlinjer på bestemte sider, og at divide-y på foreldreelementet oppretter automatiske skillelinjer mellom underordnede elementer. Deretter skal vi se på verktøyklasser for avrundede hjørner.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Kantlinjebredde og -farge» gratis?
Ja – hele teksten i «Kantlinjebredde og -farge» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Kantlinjebredde og -farge»?
Legg til kantlinjer med border-*-verktøy for bredde, angi fargen med border-{color}-{shade}, og kontroller individuelle sider. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Kantlinjebredde og -farge»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Kantlinjebredde og -farge
- Kantlinjeradius og avrundede hjørner
- Skygger
- Outline- og ringverktøy