CSS Basis

Selectors

Geavanceerd

< >

CSS Randen

In CSS is het mogelijk om randen te creëren met zeer weinig werk, in vergelijking met de verouderde methoden van HTML. De CSS border eigenschap bepaalt in één keer de breedte, stijl en kleur van alle randen van een element. Randen verschijnen direct tussen de margin en padding van een element.

Voorbeeld van een zichtbare rand.

Voorbeeld van een zichtbare rand met rondingen.

Voorbeeld van een zichtbare rand aan de linkerkant.

CSS border eigenschap

De CSS eigenschap border definieert een zichtbare rand rond een element. Je kunt de onderstaande eigenschappen voor randen gebruiken om vast te leggen op welke manier de rand om een element moet worden weergegeven.

border, border-bottom, border-left, border-right, border-top, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, border-style, border-bottom-style, border-left-style, border-right-style, border-top-style, border-width, border-bottom-width, border-left-width, border-right-width, border-top-width.

Voorbeeld:

p { border: 1px solid silver; }

Uitproberen

CSS border style

De eigenschap border-style bepaalt in één keer de stijl van alle randen van een element.

De volgende waarden zijn toegestaan:

dotted	-	De rand is een enkele vlakke lijn bestaande uit punten.
dashed	-	De rand is een enkele vlakke lijn bestaande uit streepjes.
solid	-	De rand is een enkele doorgaande vlakke lijn.
double	-	De rand is een dubbele doorgaande vlakke lijn.
groove	-	Er wordt een 3D gegroefde rand weergegeven.
ridge	-	Er wordt een 3D geribbelde rand weergegeven.
inset	-	De rand suggereert dat het element in de achtergrond is opgenomen.
outset	-	De rand suggereert dat het element uit de achtergrond komt.
none	-	Er wordt geen rand weergegeven.
hidden	-	De rand is verborgen en wordt niet weergegeven.

Voorbeeld van border-style

CSS border width

De border-width eigenschap bepaalt in één keer de breedte van alle randen van een element. De breedte kan worden ingesteld door de volgende waarden te gebruiken (px, pt, cm, em, enz.) of door een van de drie vooraf gedefinieerde waarden: thin, medium of thick.

Voorbeeld:

p.een {
  border-style: solid;
  border-width: 5px;
}

Uitproberen

De eigenschap border-width kan één tot vier waarden hebben (voor de bovenrand, rechterrand, onderrand en linkerrand). De border-width eigenschap is een verkorte weergave van de eigenschappen border-top-width, border-right-width, border-bottom-width en border-left-width. Dit betekent dat je meerdere waarden tegelijk kunt opnemen in één eigenschap. Daarom gaat de voorkeur vaak naar de eigenschap border-width.

border-width: 4px 5px 8px 10px; /* boven, rechts, onder, links */

4px	-	Bovenrand is 4 pixels breed.
5px	-	Rechterrand is 5 pixels breed.
8px	-	Onderrand is 8 pixels breed.
10px	-	Linkerrand is 10 pixels breed.

Voorbeeld:

p.een {
  border-style: solid;
  border-width: 10px 20px; /* 10px boven en onder, 20px links en rechts */
}
p.twee {
  border-style: solid;
  border-width: 20px 5px; /* 20px boven en onder, 5px links en recht */
}
p.drie {
  border-style: solid;
  border-width: 8px 10px 25px 35px; /* 8px boven, 10px rechts, 25px onder en 35px links */
}

Uitproberen

De eigenschap border-width werkt alleen als deze gebruikt wordt samen met de eigenschap border-style. Je zult eerst de randen moeten instellen voordat je de breedte of dikte kunt opgeven.

CSS border color

De border-color eigenschap bepaalt in één keer de kleur van alle randen van een element. Dit is ook een verkorte eigenschap voor het instellen van de kleur van alle vier de zijden van de rand van een element.

border-color: #ff0000; /* Kleur rood */

Voor de eigenschap border-color kunnen kleuren gedefinieerd worden door middel van:

	Kleurnamen - zoals "red", "green", "blue", "transparent", enz.
	HEX-waarde - zoals "#ff0000", "#00ff00", enz.
	RGB-waarde - zoals "rgb(255, 0, 0)"

Voorbeeld:

p.een {
  border-style: solid;
  border-color: red;
}
p.twee {
  border-style: solid;
  border-color: green;
} 
p.drie {
  border-style: dotted;
  border-color: blue;
}

Uitproberen

De eigenschap border-color kan één tot vier waarden hebben (voor de bovenrandkleur, rechterrandkleur, onderrandkleur en linkerrandkleur). Net als de border-width eigenschap kan je deze tegelijk opnemen.

Voorbeeld:

p.een {
  border-style: solid;
  border-width: 20px;
  border-color: red;
}
p.twee {
  border-style: solid;
  border-width: 20px;
  border-color: red green;
}
p.drie {
  border-style: solid;
  border-width: 20px;
  border-color: red green blue;
}
p.vier {
  border-style: solid;
  border-width: 20px;
  border-color: red green blue yellow;
}

Uitproberen

De eigenschap border-width of border-color zullen niet werken als deze alleen worden gebruikt. Gebruik de eigenschap border-style om eerst de stijl van de randen in te stellen.

Soorten randen

Uit de bovenstaande voorbeelden heb je gezien dat het mogelijk is om voor elke zijde een andere rand of kleur op te geven. In CSS zijn er ook eigenschappen waarmee je verschillende randen kunt opmaken bijv. de bovenste rand voorzien van een stippellijn onderste van een gestreepte lijn en al de andere van een vlakke lijn.

Voorbeeld:

p {
  border-top-style: dotted; /* Stippellijn */
  border-right-style: solid; /* vlakke lijn */
  border-bottom-style: dashed; /* getreepte lijn */
  border-left-style: solid; /* vlakke lijn */
}

Uitproberen

De eigenschap border-style kan één tot vier waarden hebben (voor de bovenrand, rechterrand, onderrand en linkerrand). Je kunt deze waarden tegelijk opnemen.

Voorbeeld:

p.een {
  border-style: dotted; /* Één waarde */
}
p.twee {
  border-style: dotted solid; /* Twee waarden */
}
p.drie {
  border-style: dotted solid dashed; /* Drie waarden */
}
p.vier {
  border-style: dotted solid dashed double; /* Vier waarden */
}

Uitproberen

Border shorthand

Zoals je in de bovenstaande voorbeelden kunt zien, zijn er veel eigenschappen waarmee je rekening moet houden bij het omgaan met de randen (borders). Het is echter ook mogelijk om al deze eigenschappen in één enkele declaratie op te nemen om de code in te korten en om extra typen te voorkomen. Dit wordt een shorthand eigenschap genoemd.

De border eigenschap is een verkorte eigenschap van:

	border-width
	border-style (verplicht)
	border-color

In de onderstaande voorbeelden zie je dat de CSS code is verkort en dat al deze 3 eigenschappen in de code zijn verwerkt. In het eerste voorbeeld zie je dat border-width: 4px, border-style: solid en border-color: red is.

Zichtbare rand

Dit is het resultaat

p { border: 4px solid red; }

Voorbeeld

Zichtbare rand links

Dit is het resultaat

p { border-left: 10px solid red; }

Voorbeeld

Zichtbare rand onder

Dit is het resultaat

p { border-bottom: 5px solid red; }

Voorbeeld

Randen en rondingen

De eigenschap border-radius wordt gebruikt om afgeronde randen aan een element toe te voegen.

Voorbeeld:

p {
  border: 2px solid red;
  border-radius: 6px;
}

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.