Cascading Style Sheets/Borders

Het toevoegen van borders

Toevoegen van Borders(omlijning) gebeurt door het gebruiken van de "border" eigenschap.

.classnaam
{
border: 1px #000 solid;
}

1 px geeft de dikte van de border aan, #000 de kleur (zwart) en solid het type border(hierover later meer). De volgorde van deze drie dingen maakt niet uit.

We kunnen deze drie dingen ook apart aangeven, dit geeft hetzelfde resultaat:

.classnaam
{
border-width: 1px;
border-color:#000;
border-style:solid;
}

Ik gebruik de bovenste methode , dit is sneller en korter , maar geeft het zelfde resultaat.

Type borders

Behalve het type solid (doorlopende lijn) zijn er meerdere types borders. Zo onderscheiden we onder andere:

.classnaam
{
border-style:dotted;
}

.classnaam
{
border-style:dashed;
}

Dit zijn slechts een paar variaties, er zijn veel meer bordertypes. Op het web is hier voldoende over te vinden.

borders voor andere zijden

Nu kan het natuurlijk zo zijn dat je niet om heel je element een border wil, maar alleen een lijn aan de rechter zijkant. Dit kan, we moeten alleen aangeven dat het de rechter zijkant betreft. dit doen we zo:

.classnaam
{
border-right:1px #000 solid;
padding: 2px;
}

Zoals je ziet staat er nu alleen een border aan de rechter zijkant. In plaats van border-right, kun je ook border-left, border-top of border-bottom gebruiken. Ook kun je, net zo als bij het aangeven van borders voor het gehele element i.p.v. de shorthand methode te gebruiken het voluit schrijven:

.classnaam
{
border-bottom-width:1px ;
border-bottom-color:#000 ;
border-bottom-type:solid;
}

Overschrijven van eerder gespecificeerde borders

Stel: je wil dat je element aan alle zijden een solid border heeft, maar aan de onderkant een gestreepte (dashed). Nu kun je alles gaan uitschrijven (border-right, border-left enz.) ,wat veel onnodige CSS geeft, zeker aangezien drie van de vier borders hetzelfde zijn. Het is beter eerst een algemene regel voor alle borders te maken en dit dan voor border-bottom te overschrijven :

.classnaam
{
border: 1px #000 solid;
border-bottom-style: dashed;
}

Let er hierbij op dat je de uitzondering als laatste schrijft. Alleen dan overschrijft hij de eerder gespecificeerde regel.