--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/randen-slagschaduwen' title: 'Randen, ronde hoeken en slagschaduwen toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:59:13+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Omlijst een kaart, rond de hoeken van een foto af of til een box met een schaduw van de pagina. Je stelt dit allemaal in in het paneel Stijl van het element, en je kunt het bij hover wijzigen in het paneel Zweefstijl. Gebruik het om één kaart te laten opvallen. Voor hetzelfde kader op een hele reeks kaarten houdt een gedeelde klasse ze gelijk. De video volgt het recept hieronder: hij maakt van een tekstblok een kaart met een rand, ronde hoeken en een schaduw die bij hover dieper wordt. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Randen, ronde hoeken en slagschaduwen toevoegen' description: |- Omlijst een kaart, rond de hoeken van een foto af of til een box met een schaduw van de pagina. Je stelt dit allemaal in in het paneel Stijl van het element, en je kunt het bij hover wijzigen in het paneel Zweefstijl. Gebruik het om één kaart te laten opvallen. Voor hetzelfde kader op een hele reeks kaarten houdt een gedeelde klasse ze gelijk. De video volgt het recept hieronder: hij maakt van een tekstblok een kaart met een rand, ronde hoeken en een schaduw die bij hover dieper wordt. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:59:13+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/randen-slagschaduwen' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/randen-slagschaduwen' description: |- Omlijst een kaart, rond de hoeken van een foto af of til een box met een schaduw van de pagina. Je stelt dit allemaal in in het paneel Stijl van het element, en je kunt het bij hover wijzigen in het paneel Zweefstijl. Gebruik het om één kaart te laten opvallen. Voor hetzelfde kader op een hele reeks kaarten houdt een gedeelde klasse ze gelijk. De video volgt het recept hieronder: hij maakt van een tekstblok een kaart met een rand, ronde hoeken en een schaduw die bij hover dieper wordt. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) # Randen, ronde hoeken en slagschaduwen toevoegen. DXPR Builder lerenPagina’s bouwenElementen stylen ## In deze gids Gerelateerde gidsen - [Binnen- en buitenruimte toevoegen met het boxmodel](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/witruimte) Omlijst een kaart, rond de hoeken van een foto af of til een box met een schaduw van de pagina. Je stelt dit allemaal in in het paneel **Stijl** van het element, en je kunt het bij hover wijzigen in het paneel **Zweefstijl**. Gebruik het om één kaart te laten opvallen. Voor hetzelfde kader op een hele reeks kaarten houdt een gedeelde klasse ze gelijk. De video volgt het recept hieronder: hij maakt van een tekstblok een kaart met een rand, ronde hoeken en een schaduw die bij hover dieper wordt. ## Voordat je begint - Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met **More**. Nieuw in de builder? Zie [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina). - **Opslaan** in het dialoogvenster bewaart een wijziging in de editor. **Opslaan** op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”. - **Licht één ding uit.** Een rand of een schaduw trekt het oog naar een belangrijke datum, een aanbieding of een citaat. Zet hem op alles en hij werkt niet meer. - **Houd een reeks gelijk.** Voor hetzelfde kader op veel kaarten sla je één kaart op als sjabloon of gebruik je een gedeelde klasse. Zie [HTML-ID en klassen](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/aangepaste-css). - **Laat het thema schaduwen afstemmen.** De vijf niveaus van **Slagschaduw** zijn één keer gedefinieerd voor de hele site. Je thema kan een niveau anders stijlen, en elk element dat het gebruikt volgt. ## Recept: een uitgelichte kaart Je krijgt een zachte box met een dunne rand in je merkkleur. Hij heeft ronde hoeken en een schaduw die groeit bij hover. 1. Beweeg over het **Tekst**-element, klik op **More** en daarna **Instellingen**. 2. Open het paneel **Stijl**. Het boxmodel staat bovenaan. Zijn slotjes beginnen open; klik op het slotje naast **Opvulling** om het te sluiten, zodat zijn vier kanten samen bewegen. 3. Klik op de bovenkant van **Opvulling**, typ 32 en druk op Enter. Alle vier de kanten tonen nu 32px. 4. Kies een lichte **Achtergrond**-kleur, zoals lichtgrijs. 5. Zet **Randstijl** op **Effen**. 6. Sluit het slotje naast **Rand** en klik dan op een van zijn kanten, typ 1 en druk op Enter. 7. Kies een **Randkleur**, zet **Randradius** op 16 en zet **Slagschaduw** op 3. 8. Open het paneel **Zweefstijl** en zet **Slagschaduw** op 5. 9. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. 10. Kies **Voorbeeld** in het weergavemenu (het oogpictogram) en wijs naar de kaart. Zijn schaduw wordt dieper. ## Wat je ziet De kaart heeft een dunne rand in je kleur, ronde hoeken en een zachte schaduw eronder. In **Voorbeeld** groeit de schaduw dieper terwijl de aanwijzer op de kaart staat en zakt terug als hij weggaat. ## Hoe een rand is opgebouwd Een rand heeft drie instellingen nodig, en het paneel spreidt ze uit. Stel alle drie in: 1. **Randstijl** kiest de lijn: **Effen**, **Gestippeld** of **Gestreept**. Op **Themostandaarden** hebben de meeste elementen helemaal geen rand. **Geen** verwijdert een rand die je thema tekent. 2. De **Rand**-ring van het boxmodel stelt de breedte van elke kant in, van 0 tot 50 px. Als je hem leeg laat, gebruikt de browser zijn eigen breedte van ongeveer 3 px. 3. **Randkleur** stelt de kleur in. Als je hem leeg laat, neemt de rand de kleur van de tekst. **Randradius** rondt alle vier de hoeken af, van 0 tot 100 px. Hij rondt ook de achtergrond en de schaduw af. Op een **Afbeelding** rondt hij de foto zelf af. Voor een cirkel maak je het element vierkant. Zet dan **Randradius** op de helft van zijn breedte in pixels: 100 voor een element van 200 px breed. Voor alles wat breder is voeg je de klasse **Cirkelvormig (50% radius)** toe onder **HTML-klassen**. Op een **Afbeelding** rondt deze klasse het kader om de foto af, niet de foto, dus gebruik daar **Randradius**. ## Niveaus van slagschaduw | Niveau | Schaduw onder het element | |---|---| | 0 | Geen van DXPR Builder; je thema beslist | | 1 | 2 px omlaag, 7 px vervaging, 20% zwart | | 2 | 4 px omlaag, 12 px vervaging, 30% zwart | | 3 | 5 px omlaag, 25 px vervaging, 30% zwart | | 4 | 8 px omlaag, 38 px vervaging, 30% zwart | | 5 | 12 px omlaag, 57 px vervaging, 30% zwart | Dit zijn de standaardniveaus. Elk niveau is een gedeelde stijl, geen waarde opgeslagen in je pagina, dus een thema kan een niveau voor de hele site opnieuw afstemmen. Voor je thema-ontwikkelaar: de niveaus zijn de CSS-variabelen `--dxb-box-shadow-1` tot `--dxb-box-shadow-5`. In het paneel **Zweefstijl** stelt **Slagschaduw** het niveau in terwijl de aanwijzer op het element staat. De nieuwe schaduw vloeit in over 0,15 seconden. Een hoger niveau bij hover laat een kaart opgetild lijken. **HTML-klassen** biedt meer vormen: **Opgetilde slagschaduw**, **Verhoogde slagschaduw**, **3D-schaduw** en **Gebogen horizontale slagschaduw**. Hij heeft ook de Bootstrap-klassen **Kleine schaduw**, **Standaardschaduw** en **Grote schaduw**. Gebruik één schaduw per element. De schaduwklassen van Bootstrap winnen van de regelaar **Slagschaduw**. ## Als je de ingestelde rand, hoeken of schaduw niet ziet - **De rand verschijnt niet.** **Randstijl** staat op **Themostandaarden** of **Geen**. Kies **Effen**, **Gestippeld** of **Gestreept**. - **De rand is dikker dan je wilt.** Er is geen breedte ingesteld, dus de browser gebruikt ongeveer 3 px. Stel de **Rand**-kanten in in het boxmodel. - **De rand heeft de verkeerde kleur.** Een lege **Randkleur** neemt de tekstkleur. Kies een **Randkleur**. - **De hoeken blijven vierkant.** Een klasse zoals **Geen ronde hoeken (rounded-0)** onder **HTML-klassen**, of een themaregel met `!important`, wint. Verwijder de chip, of vraag je webmaster naar de themaregel. - **De hoeken ronden af maar er verschijnt geen cirkel.** De regelaar stopt bij 100 px. Gebruik de klasse **Cirkelvormig (50% radius)**. - **Slagschaduw verandert niets.** Een Bootstrap-schaduwklasse zoals **Grote schaduw** onder **HTML-klassen** wint. Verwijder zijn chip. Niveau 1 is ook zwak, dus probeer niveau 3 om te testen. - **De schaduw groeit niet bij hover.** Stel **Slagschaduw** in in het paneel **Zweefstijl**, niet in **Stijl**, en kies een hoger niveau dan het rustniveau. - **Slechts één kant veranderde.** Het slotje naast **Opvulling** of **Rand** stond open. Sluit het en voer de waarde opnieuw in. - **De zweefschaduw verschijnt nooit op een telefoon.** Touchscreens hebben geen aanwijzer, dus een zweefuiterlijk verschijnt pas na een tik. ## Wat nu? - [Witruimte](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/witruimte): geef de inhoud ruimte in de rand.