In deze tweede blog over CSS eigenschappen bespreken we de opmaak van omrandingen. De meeste websites zullen deze CSS eigenschappen gebruiken. Met name randkleur en randdikte zijn eigenschappen waar veel variatie in te vinden is, maar met de nieuwe CSS3 specificatie is er veel meer mogelijk. Deze blog is een vertaalde samenvatting van het uitgebreidere Engelstalige artikel ‘An introduction to CSS border properties‘. In deze originele blog zijn ook voorbeelden te vinden.

Ronde hoeken

De CSS eigenschap border-radius kan gebruikt worden om ronde hoeken te creëren. Het is mogelijk om iedere hoek een andere ronding te geven, of om bijvoorbeeld een cirkel te maken: maak hiervoor een html element met gelijke hoogte en breedte en geef dit element een border-radius van 50%. Ronde hoeken worden door de meeste browsers ondersteund, maar niet door de oude versies van Internet Explorer (IE8 en lager).

Stijl van de randen

Naast de standaard vaste, doorlopende lijn kan de omranding weergegeven worden met een stippellijn of een dubbele lijn (border-style: solid, dashed, dotted, double). Daarnaast is het mogelijk om 3D effecten te creëren met de stijlen ridge, groove, inset en outset.

Outline

Met de CSS eigenschap outline kan een extra rand om een html element weergegeven worden. Wanneer outline gebruikt wordt in combinatie met een ‘gewone’ border, dan lijkt het of het element 2 randen heeft. Voor de opmaak van de outline zijn vergelijkbare opties beschikbaar als voor normale omranding: kleur, dikte en stijl kunnen aangepast worden.

Een outline wordt buiten het html element gepositioneerd en beïnvloed daardoor de afmetingen van dit element.

Lijndikte

De dikte van de omranding kan eenvoudig aangepast worden met de CSS eigenschap border-width. Deze eigenschap is één van de vele eigenschappen die geanimeerd kunnen worden via de @keyframes eigenschap: je kunt de dikte van een omranding dus in een animatie laten variëren.

Een omranding met afbeeldingen

Border-image is één van de relatief nieuwe CSS eigenschappen waarmee omrandingen opgemaakt kunnen worden. Deze eigenschap wordt dan ook niet ondersteund door oudere browsers (IE10 en lager). Toch kan de border-image gebruikt worden om hele gave randen te maken. Via de border-images-source geef je aan welke afbeelding gebruikt moet worden langs de rand van een element. Vervolgens kan je met border-image-slice, repeat en outset de opmaak verder finetunen.