--- title: "Hoe voeg je randen toe aan een afbeelding in Markdown" slug: "how-to-add-borders-to-an-image-in-markdown" description: "Format you images by adding borders to them in the Markdown editor using this simple Hack. " tags: ["Customization", "Images"] updated: 2026-06-22T09:03:37Z published: 2026-06-22T09:03:37Z canonical: "docs.document360.com/how-to-add-borders-to-an-image-in-markdown" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Hoe voeg je randen toe aan een afbeelding in Markdown De Markdown-editor heeft geen ingebouwde manier om randen aan afbeeldingen toe te voegen. De oplossing is om de HTML-tag `<img>` te gebruiken met de `border` CSS-eigenschap binnen het `style` attribuut, die door de Markdown-editor van Document360 correct wordt weergegeven. --- ## Wanneer te gebruiken afbeeldingsranden - **Screenshots met witte of lichte achtergronden** — een rand creëert een zichtbare rand tussen de afbeelding en de pagina, waardoor het beeld niet in de achtergrond opgaat. - **UI-screenshots of diagrammen** — een dunne rand geeft de afbeelding een schone, afgesloten uitstraling, wat goed werkt voor technische documentatie. - **Groeperen of nadruk** — een rand scheidt een afbeelding visueel van de omliggende inhoud en geeft aan dat het een apart element is dat het waard is om te onderzoeken. Gebruik de randen spaarzaam. Het toepassen ervan op elke afbeelding vermindert het effect en kan artikelen rommelig laten aanvoelen. OPMERKING Deze techniek werkt alleen in de **Markdown-editor**. Gebruik in de WYSIWYG-editor in plaats daarvan de randschakelaar in het beeldinstellingenpaneel. --- ## Inzicht in de grenseigenschap De `border` CSS-stenografie stelt drie waarden in deze volgorde: | Waarde | Wat het controleert | Voorbeeld | | --- | --- | --- | | Breedte | Dikte van de randlijn | `2px` | | Stijl | Uiterlijk van de grenslijn | `solid`, `dashed`, `dotted` | | Kleur | Kleur van de rand — elke CSS-kleurnaam of hex-code | `grey`, `#000000` | --- ## Snelle referentie Vervang `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, en de randwaarden door je vereisten. ``` YOUR_ALT_TEXT ``` Om de rand aan te passen, pas je de breedte, stijl en kleur aan: ``` YOUR_ALT_TEXT YOUR_ALT_TEXT ``` OPMERKING Grijs is een van de meest gebruikte randkleuren naast zwart, omdat het goed werkt tegen zowel lichte als donkere achtergronden. Vervang `grey` door een geldige CSS-kleurnaam (bijvoorbeeld `blue`, `green`, `yellow`) of een hexcode die bij je ontwerp past. --- ## Hoe voeg je een rand toe aan een afbeelding in Markdown 1. Open het gewenste artikel in het Knowledge Base-portaal. 2. Plak het fragment hieronder op de plek waar je wilt dat de afbeelding verschijnt. ``` YOUR_ALT_TEXT ``` 1. Vervang `YOUR_IMAGE_URL` door de URL van je afbeelding. 2. Vervang `YOUR_ALT_TEXT` het door een korte beschrijving van de afbeelding voor toegankelijkheid. 3. Pas de breedte, stijl en kleur van de rand aan indien nodig — zie de [referentietabel van randeigenschappen](/docs/nl/how-to-add-borders-to-an-image-in-markdown#understanding-the-border-property) hierboven. --- ## Uitkomst ### Zonder grens ![Screenshot of a health check metrics dashboard without a border applied.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-without_shadow_Featured_image-Health_check_metrics%281%29.png) ### Met rand ![Screenshot of a health check metrics dashboard with a 2-pixel solid grey border applied.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-with_shadow_Featured_image-Health_check_metrics%281%29.png) OPMERKING Je kunt een rand combineren met een schaduw op dezelfde afbeelding met beide CSS-eigenschappen in het `style` attribuut. Zie [Hoe je schaduwen aan een afbeelding toevoegt in Markdown](/help/docs/nl/how-to-add-shadows-to-an-image-in-markdown) voor de schaduwsyntaxis. ## Related - [Hoe je de afbeelding uitlijnt in Markdown](/how-to-align-the-image-in-markdown.md) - [Hoe voeg je accordeon toe in Markdown](/how-to-add-accordion-in-markdown.md) - [Hoe voeg je extra ruimte toe in Markdown](/how-to-add-extra-space-in-markdown.md) - [Hoe je de tekst in Markdown centraal uitlijnt](/how-to-center-align-the-text-in-markdown.md) - [Hoe voeg je schaduwen toe aan een afbeelding in Markdown](/how-to-add-shadows-to-an-image-in-markdown.md) - [Hoe verander je de kleur van de tekst in Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)