El editor Markdown no tiene una forma incorporada de añadir bordes a las imágenes. La solución es usar la etiqueta HTML <img> con la border propiedad CSS dentro del style atributo, que el editor Markdown de Document360 renderiza correctamente.
Cuándo usar los bordes de imagen
- Capturas de pantalla con fondos blancos o claros — un borde crea un borde visible entre la imagen y la página, impidiendo que la imagen se mezcle con el fondo.
- Capturas de pantalla o diagramas de la interfaz — un borde fino da a la imagen un aspecto limpio y contenido, lo que funciona bien para la documentación técnica.
- Agrupación o énfasis — un borde separa visualmente una imagen del contenido circundante y señala que es un elemento distinto que merece la pena examinar.
Usa las fronteras con moderación. Aplicarlas a cada imagen reduce su efecto y puede hacer que los artículos parezcan desordenados.
Esta técnica solo funciona en el editor Markdown. En el editor WYSIWYG, usa el interruptor de borde en el panel de configuración de imagen en su lugar.
Comprensión de la propiedad fronteriza
La border abreviatura CSS establece tres valores en este orden:
| Valor | Lo que controla | Ejemplo |
|---|---|---|
| Anchura | Grosor de la línea de frontera | 2px |
| Estilo | Aparición de la línea fronteriza | solid, dashed, dotted |
| Color | Color del borde — cualquier nombre de color CSS o código hexadecimal | grey, #000000 |
Referencia rápida
Sustituye YOUR_IMAGE_URL, YOUR_ALT_TEXT, y los valores de frontera por tus requisitos.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
Para personalizar el borde, ajusta el ancho, el estilo y el color:
<!-- 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;">
El gris es uno de los colores de borde más usados junto al negro, ya que funciona bien tanto contra fondos claros como oscuros. Sustituye grey por cualquier nombre de color CSS válido (por ejemplo, blue, green, yellow) o un código hexadecimal para que coincida con tu diseño.
Cómo añadir un borde a una imagen en Markdown
- Abre el artículo deseado en el portal de la Base de Conocimiento.
- Pega el fragmento de abajo en la ubicación donde quieres que aparezca la imagen.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
- Sustituye
YOUR_IMAGE_URLpor la URL de tu imagen. - Sustituye
YOUR_ALT_TEXTpor una breve descripción de la imagen para mayor accesibilidad. - Ajusta el ancho, estilo y color del borde según sea necesario — consulta la tabla de referencia de propiedades del borde arriba.
Resultado
Sin fronteras
Con frontera
Puedes combinar un borde con una sombra en la misma imagen usando ambas propiedades CSS en el style atributo. Consulta Cómo añadir sombras a una imagen en Markdown para la sintaxis de sombras.