Border in CSS

Borders worden in een website voor allerlei doeleinden gebruikt, maar hoofddoel is het afbakenen van stukken tekst of andere inhoud. Met CSS kun je een heleboel variëren op dit gebied. We gaan even op een rij zetten wat je er mee kan.

Er zijn drie onderdelen voor borders die je apart kunt bewerken. border-width, border-style en border-color. Respectievelijk de dikte van de rand, de stijl en de kleur. Omdat je een border altijd plaatst om een stuk tekst heen in een zogenaamde box, zijn er vier borders, top (boven) right (rechts) bottom (onder) en left (links). Elke zijde kun je afzonderlijk instellen. In totaal zijn er dus vier keer drie border stijlen, en is er nog een verkorte manier van werken, waarover later meer.

Border-width
De dikte van de border kan op een aantal manieren worden bepaald, in pixels, wat de meest gebruikte manier is, maar ook in inches (in), em, ex, pt of pc (zie ook over pixels, punten en …). Daarnaast mag je ook de woorden ’thin’, ‘medium’ en ’thick’ gebruiken. Wanneer je Border-width als verkorte versie gebruikt is het wel handig als je ook een border-style definieert. Anders heeft het instellen van een dikte geen zin. Zonder border-style wordt de dikte op 0 gezet. Voorbeeld:

Border-style
De volgende stijlen kunnen worden gebruikt; none (geen), hidden (verscholen), dotted (punten), dashed (streep), solid (lijn), double (dubbel), groove, ridge, inset en outset. Standaard is de stijl ‘none’. Aan de hand van een voorbeeld is snel te ontdekken hoe de stijlen er uit zien.

Border-color
Met border-color bepaal je de kleur van de rand. Hier kun je kiezen uit een kleurnaam (bijv red), de 00-FF (#FF0033) notatie, de verkorte 0-F (#F03), de 0-255 notatie (0,0,255)en de % notatie (0%, 0%, 100%).

Verkorten
je kunt natuurlijk elke rand, elke dikte, elke kleur en elke stijl apart gaan benoemen. Hierboven zag je al dat dat korter kan. Zo kun je bijvoorbeeld border-style en color algemeen aangeven en border-width voor alle vier de randen apart benoemen. Dus dan krijg je

De volgorde is dus boven, rechts, onder en links. Overigens kun je ook twee maten aangeven en dan gelden de maten in volgorde voor boven-onder, links-rechts. Overigens kan dit ook met kleur en stijl.

Alleen border
Wanneer je het heel kort wilt doen, dan gebruik je ‘border‘, waarna je drie onderdelen aangeeft. dikte, stijl en kleur, dus:

Dat kun je natuurlijk ook doen voor elke rand individueel, dan wordt het dus:

Tot zover borders.