CSS - Borders


CSS is er voor de opmaak en hiermee heb je ook de mogelijkheid om borders toe te voegen aan elementen. De eigenschappen die je instelt voor een border is de dikte van de rand, soort rand en de kleur. De code is border: met de eigenschappen erachter zoals hieronder de code waarin een rand om een afbeelding wordt geplaatst. De dikte van de rand is ingesteld op 5px, solid staat voor het soort rand en als laatste is de kleur ingesteld.

Let wel op dat een rand een bepaalde ruimte inneemt. Stel je hebt een border van 5px toegepast op een element met een breedte van 350px dan wordt de breedte dus 360px.

img {
        border:5px solid #000000;
}


CSS, Border / rand

Hierboven zie je de bovenstaande code toegepast op de afbeelding. In het voorbeeld staat Solid aangegeven als type rand, andere mogelijkheden zijn Double, Dotted en Dashed.

Double

CSS, Border / rand

Dotted

CSS, Border / rand

Dashed

CSS, Border / rand

Dan is er ook de mogelijkheid om een rand toe te passen op een kant van een element. In dat geval wordt de code dan bijvoorbeeld "border-top:" of "border-bottom:" voor de boven of onderkant en "border-left:" of "border-right:" voor links of rechts, een voorbeeld hieronder.

Alleen de bovenkant

CSS, Border / rand

Ronde hoeken

Het is eventueel mogelijk met CSS om in combinatie met randen ook ronde hoeken te gebruiken. Meer daarover lees je in de bijbehorende tutorial: Ronde hoeken.

Outline

CSS kent ook de eigenschappen genaamd Outline. Met behulp van Outline kan ook een border gemaakt worden. Outline doet eigenlijk hetzelfde als Border echter het grote verschil is dat Outline geen ruimte inneemt maar een ander element overlapt.

outline:2px solid #000000;


Class aptent taciti sociosqu ad litora torquent per conubia nostra