L’éditeur Markdown n’a pas de moyen intégré d’ajouter des bordures aux images. La solution consiste à utiliser la balise HTML <img> avec la border propriété CSS à l’intérieur de l’attribut style , que l’éditeur Markdown de Document360 affiche correctement.
Quand utiliser les bordures d’image
- Captures d’écran avec fond blanc ou clair — une bordure crée un bord visible entre l’image et la page, empêchant l’image de se fondre dans l’arrière-plan.
- Captures d’écran ou diagrammes d’interface utilisateur — une bordure fine donne à l’image une apparence propre et contenue, ce qui fonctionne bien pour la documentation technique.
- Regroupement ou emphase — une bordure sépare visuellement une image du contenu environnant et indique qu’elle est un élément distinct digne d’être examiné.
Utilisez les frontières avec parcimonie. Les appliquer à chaque image réduit leur effet et peut donner l’impression que les articles sont encombrés.
Cette technique ne fonctionne que dans l’éditeur Markdown. Dans l’éditeur WYSIWYG, utilisez plutôt le bouton de contour dans le panneau des paramètres d’image.
Comprendre la propriété frontalière
L’abréviation border CSS définit trois valeurs dans cet ordre :
| Valeur | Ce qu’il contrôle | Exemple |
|---|---|---|
| Largeur | Épaisseur de la ligne de frontière | 2px |
| Style | Apparition de la ligne frontalière | solid, dashed, dotted |
| Couleur | Couleur de la bordure — tout nom de couleur CSS ou code hexadécimal | grey, #000000 |
Petite référence
Remplacez YOUR_IMAGE_URL, YOUR_ALT_TEXT, et les valeurs de frontière par vos exigences.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
Pour personnaliser la bordure, ajustez la largeur, le style et la couleur :
<!-- Thicker black border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 4px solid black;">
<!-- Dashed blue border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px dashed blue;">
Le gris est l’une des couleurs de bordure les plus couramment utilisées aux côtés du noir, car il convient bien aussi bien sur les fonds clairs que foncés. Remplacez-le grey par n’importe quel nom de couleur CSS valide (par exemple, blue, , greenyellow, ) ou un code hexadecimal pour correspondre à votre design.
Comment ajouter une bordure à une image dans Markdown
- Ouvrez l’article souhaité dans le portail de la Base de connaissances.
- Collez l’extrait ci-dessous à l’endroit où vous souhaitez que l’image apparaisse.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
- Remplacez-le
YOUR_IMAGE_URLpar l’URL de votre image. - Remplacez-le
YOUR_ALT_TEXTpar une courte description de l’image pour plus d’accessibilité. - Ajustez la largeur, le style et la couleur de la bordure selon les besoins — voir le tableau de référence des propriétés de bordure ci-dessus.
Conséquences
Sans frontières
Avec la frontière
Vous pouvez combiner une bordure avec une ombre sur la même image en utilisant les deux propriétés CSS de l’attribut style . Voir comment ajouter des ombres à une image dans Markdown pour la syntaxe des ombres.