--- title: "Wie man Ränder zu einem Bild in Markdown hinzufügt" 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-22T08:43:25Z published: 2026-06-22T08:43:25Z 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. # Wie man Ränder zu einem Bild in Markdown hinzufügt Der Markdown-Editor verfügt nicht über eine eingebaute Möglichkeit, Ränder zu Bildern hinzuzufügen. Der Workaround besteht darin, das HTML-Tag `<img>` mit der `border` CSS-Eigenschaft innerhalb des `style` Attributs zu verwenden, was der Markdown-Editor von Document360 korrekt darstellt. --- ## Wann man Bildgrenzen verwenden sollte - **Screenshots mit weißen oder hellen Hintergründen** – ein Rand erzeugt einen sichtbaren Rand zwischen Bild und Seite und verhindert, dass das Bild mit dem Hintergrund übergeht. - **UI-Screenshots oder Diagramme** – ein dünner Rand verleiht dem Bild ein sauberes, abgeschlossenes Aussehen, was sich gut für technische Dokumentation eignet. - **Gruppierung oder Betonung** – ein Rand trennt ein Bild visuell vom umgebenden Inhalt und signalisiert, dass es sich um ein eigenständiges Element handelt, das es wert ist, betrachtet zu werden. Verwende die Ränder sparsam. Wenn man sie auf jedes Bild anwendet, verringert man deren Wirkung und kann Artikel überladen wirken lassen. HINWEIS Diese Technik funktioniert nur im **Markdown-Editor**. Im WYSIWYG-Editor verwenden Sie stattdessen den Umschalter im Bildeinstellungspanel. --- ## Verständnis der Grenzeigenschaft Die CSS-Abkürzung `border` setzt in dieser Reihenfolge drei Werte: | Wert | Was er kontrolliert | Beispiel | | --- | --- | --- | | Breite | Dicke der Grenzlinie | `2px` | | Stil | Aussehen der Grenzlinie | `solid`, `dashed`, `dotted` | | Farbe | Farbe des Randes – jeder CSS-Farbname oder Hex-Code | `grey`, `#000000` | --- ## Kurze Referenz Ersetzen Sie `YOUR_IMAGE_URL`, `YOUR_ALT_TEXT`, und die Randwerte durch Ihre Anforderungen. ``` YOUR_ALT_TEXT ``` Um den Rand anzupassen, passen Sie Breite, Stil und Farbe an: ``` YOUR_ALT_TEXT YOUR_ALT_TEXT ``` HINWEIS Grau ist eine der am häufigsten verwendeten Randfarben neben Schwarz, da es sowohl auf hellen als auch auf dunklen Hintergründen gut funktioniert. Ersetzen Sie `grey` durch einen gültigen CSS-Farbnamen (zum Beispiel `blue`, `green`, `yellow`) oder einen Hex-Code, der zu Ihrem Design passt. --- ## Wie man in Markdown einen Rahmen zu einem Bild hinzufügt 1. Öffnen Sie den gewünschten Artikel im Knowledge Base-Portal. 2. Füge den untenstehenden Ausschnitt an die Stelle ein, an der das Bild erscheinen soll. ``` YOUR_ALT_TEXT ``` 1. Ersetzen Sie `YOUR_IMAGE_URL` sie durch die URL Ihres Bildes. 2. Ersetzen `YOUR_ALT_TEXT` Sie sie durch eine kurze Beschreibung des Bildes zur Zugänglichkeit. 3. Passe die Randbreite, den Stil und die Farbe nach Bedarf an – siehe oben die [Referenztabelle der Randeigenschaften](/docs/de/how-to-add-borders-to-an-image-in-markdown#understanding-the-border-property) . --- ## Ergebnis ### Ohne Grenze ![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) ### Mit 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) HINWEIS Man kann einen Rand mit einem Schatten auf demselben Bild mit beiden CSS-Eigenschaften im `style` Attribut kombinieren. Sieh [dir in Markdown an, wie man Schatten zu einem Bild hinzufügt](/help/docs/de/how-to-add-shadows-to-an-image-in-markdown) , für die Schattensyntax. ## Related - [Wie man das Bild in Markdown ausrichtet](/how-to-align-the-image-in-markdown.md) - [Wie man Akkordeon in Markdown hinzufügt](/how-to-add-accordion-in-markdown.md) - [Wie man zusätzlichen Platz in Markdown hinzufügt](/how-to-add-extra-space-in-markdown.md) - [Wie man den Text in Markdown zentriert](/how-to-center-align-the-text-in-markdown.md) - [Wie man Schatten zu einem Bild in Markdown hinzufügt](/how-to-add-shadows-to-an-image-in-markdown.md) - [Wie man die Farbe des Textes in Markdown ändert](/how-to-change-the-color-of-the-text-in-markdown.md)