Een border rondom een afbeelding? Of een border rondom een tekstblok? Aan de hand van een voorbeeld leggen we je uit hoe je een border kunt aanpassen naar jouw eigen stijl in je WordPress websites.
Standaard CSS border
Standaard heeft de border-optie in CSS verschillende opties; solid, dotted en dashed. En uiteraard kun je dan ook nog variëren in kleur, dikte en wel of geen afgeronde hoeken. Wil je meer, maak dan je eigen border met een eigen gemaakte SVG border.
Eigenschappen en opties die je kunt gebruiken voor borders in CSS
- border-style
- Bepaalt de stijl van de border. Veelvoorkomende waarden zijn:
- solid: Een enkele, doorlopende lijn.
- dotted: Een reeks stippen.
- dashed: Een reeks korte streepjes.
- double: Twee parallelle lijnen.
- groove: Geeft een 3D-groefeffect.
- ridge: Geeft een 3D-ribbeleffect.
- inset: Geeft een 3D-ingedeukt effect.
- outset: Geeft een 3D-uitstekend effect.
- none: Geen border.
- hidden: Een verborgen border.
- Bepaalt de stijl van de border. Veelvoorkomende waarden zijn:
- border-width
- Bepaalt de breedte van de border. Je kunt pixels (px), ems (em), of andere geldige CSS-eenheden gebruiken. Bijvoorbeeld: 2px, 0.5em.
- border-color
- Definieert de kleur van de border. Kan kleurnamen, hexadecimale kleurcodes, RGB-waarden, RGBA-waarden, etc. gebruiken. Bijvoorbeeld: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5).
- border-radius
- Gebruikt voor het afronden van de hoeken van de border. Bijvoorbeeld: 5px, 50%.
- Shorthand border property
- Een shorthand-eigenschap om border-style, border-width, en border-color in één keer in te stellen. Bijvoorbeeld: border: 2px solid red;.
- Individuele border eigenschappen
- Je kunt borders apart instellen voor elke zijde van een element: border-top, border-right, border-bottom, border-left.
- border-image
- Maakt het mogelijk om een afbeelding als border te gebruiken. Vereist verschillende andere eigenschappen om correct te werken, zoals border-image-source, border-image-slice, border-image-width, enz.
- border-collapse en border-spacing
- Gebruikt in tabellen. border-collapse bepaalt of cellen gedeelde of afzonderlijke borders hebben. border-spacing regelt de ruimte tussen borders van aangrenzende cellen.
Deze eigenschappen kunnen gecombineerd worden om gedetailleerde en unieke borderstijlen te creëren voor webpagina-elementen. Het is ook mogelijk om verschillende stijlen toe te passen op verschillende kanten van een element, wat een hoge mate van aanpassing mogelijk maakt.
Custom border met SVG via CSS
Wij hebben dit toegepast op diverse websites in ons portfolio. De blokken op de homepage hebben de class border-box meegekregen en binnen deze class passen we het volgende toe wat zorgt voor de aangepaste border rondom de blokken:
Hier kun je uiteraard heel veel varianten op bedenken.
Ook een interessante optie met CSS border is dat je een border niet altijd aan alle kanten hoeft weer te geven. Bijvoorbeeld met border-top-width style je alleen de border bovenaan. Met border-bottom-color style je alleen de kleur van de border aan de onderzijde. En zo heb je nog diverse variaties. Als je hier alles over wilt weten verwijzen we graag naar W3 Schools. Of je leest onze artikelen over CSS.