Randdikte en randkleur

Randen scheiden elementen visueel van elkaar, markeren formuliervelden en geven structuur aan kaartindelingen. Tailwind biedt de familie utilities border om de dikte, kleur, stijl en afzonderlijke zijden te bepalen, allemaal zonder aangepaste CSS te schrijven. De basisklasse border past een effen rand van 1 px toe in de huidige randkleur, zodat je een eenvoudig uitgangspunt hebt voor elk onderdeel met een rand.

De utilities van Tailwind voor randdikte bepalen de dikte: border (1 px), border-2 (2 px), border-4 (4 px) en border-8 (8 px). De gewone klasse border zonder getal stelt de dikte in op 1 px. Je kunt ook border-0 gebruiken om een rand expliciet te verwijderen, bijvoorbeeld wanneer je een rand uit een basisstijl erft maar deze wilt onderdrukken.

Je kunt randen aan afzonderlijke zijden toepassen met directionele varianten: border-t (boven), border-r (rechts), border-b (onder) en border-l (links). Deze worden vaak gebruikt voor navigatielinks met een onderrand, accentlijnen links van blockquotes en scheidingslijnen boven lijstitems. Combineer ze naar behoefte: border-t border-b voegt alleen horizontale randen toe.

Randkleuren volgen het kleurenpalet van Tailwind met het patroon border-{color}-{shade}, zoals border-blue-500 of border-gray-200. Als je geen randkleur opgeeft, gebruikt Tailwind de standaardrandkleur, meestal lichtgrijs. Met een expliciete kleur kunnen je randen een semantische betekenis krijgen: rood voor fouten, groen voor succes, blauw voor focus en neutraal grijs voor structuur.

Tailwind stelt in de basisstijlen een globale standaardrandkleur in, waardoor een gewone border al een kleur heeft. Je kunt deze standaardwaarde globaal overschrijven in theme.borderColor.DEFAULT van je configuratie. Op componentniveau voeg je eenvoudig een klasse met een randkleur toe, zoals border-*. Het patroon border border-gray-200 komt zeer vaak voor: een nette, lichtgrijze rand van 1 px voor subtiele structuur.

Gebruik de transparantiemodifier met een schuine streep om randen半transparant te maken: border-blue-500/50 geeft je een blauwe rand met 50% transparantie. Dit is handig voor subtiele gelaagde effecten waarbij een effen rand te hard zou zijn, maar een lichtere tint de kleur te veel zou veranderen. Halftransparante randen komen vaak voor op UI-kaarten met glassmorphism, matglazen navigatiebalken en doorschijnende overlaycomponenten.

Naast effen randen biedt Tailwind border-dashed, border-dotted, border-double en border-none om de visuele stijl van de randlijn te bepalen. Gestreepte randen worden vaak gebruikt voor uploadzones en tijdelijke secties. Gestippelde randen komen voor in scheidingstekens van broodkruimelnavigatie en oudere UI-patronen. border-none verwijdert een rand volledig en overschrijft overgenomen stijlen.

Gebruik border-x en border-y om tegelijkertijd randen toe te passen op beide horizontale zijden (boven en onder) of beide verticale zijden (links en rechts). border-x stelt de linker- en rechterrand in en border-y de boven- en onderrand. Dit is beknopter dan twee afzonderlijke directionele klassen schrijven en maakt de bedoeling in je HTML duidelijk.

Randutilities werken met responsieve voorvoegsels en toestandsvarianten. Een veelgebruikt patroon is border-b-2 border-transparent hover:border-blue-500 voor navigatielinks met een geanimeerde onderstreping: de rand is altijd aanwezig, waardoor verschuiving van de indeling wordt voorkomen, maar blijft transparant totdat je met de muis over de link gaat. Met deze techniek ontstaat een vloeiend effect zonder verspringing, waarbij de onderstreping verschijnt bij aanwijzen, zonder JavaScript.

In plaats van aan elk onderliggend element behalve het laatste border-b toe te voegen, gebruik je divide-y op de ouder. De utilities divide-y-* van Tailwind voegen automatisch een bovenrand toe aan elk onderliggend element behalve het eerste, waardoor lijstitems netjes van elkaar worden gescheiden. divide-x-* doet hetzelfde horizontaal. Combineer dit met divide-gray-200 om de kleur van de scheidingslijn in te stellen.

Formuliervelden gebruiken randen als belangrijkste visuele aanwijzing dat ze interactief zijn. Het standaardpatroon is border border-gray-300 focus:border-blue-500, met een ring voor extra zichtbaarheid bij focus: focus:ring-2 focus:ring-blue-500/20. Voor fouttoestanden schakel je voorwaardelijk over naar border-red-500. Deze combinatie maakt formuliervelden toegankelijk en visueel duidelijk, en voldoet aan de WCAG-vereisten voor focusindicatoren.

In deze les heb je geleerd dat utilities van border-{width}, van border (1 px) tot border-8, de dikte bepalen, dat directionele utilities zoals border-t, border-b en border-x randen op specifieke zijden toepassen, en dat divide-y op de ouder automatisch scheidingslijnen tussen onderliggende elementen maakt. Hierna bekijken we utilities voor randradius en afgeronde hoeken.