---
title: "Cómo añadir bordes a una imagen en 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: ["Images", "Customization"]
updated: 2026-06-22T08:48:10Z
published: 2026-06-22T08:48:10Z
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.
# Cómo añadir bordes a una imagen en Markdown
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.
NOTA
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.
```
```
Para personalizar el borde, ajusta el ancho, el estilo y el color:
```
```
NOTA
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
1. Abre el artículo deseado en el portal de la Base de Conocimiento.
2. Pega el fragmento de abajo en la ubicación donde quieres que aparezca la imagen.
```
```
1. Sustituye `YOUR_IMAGE_URL` por la URL de tu imagen.
2. Sustituye `YOUR_ALT_TEXT` por una breve descripción de la imagen para mayor accesibilidad.
3. Ajusta el ancho, estilo y color del borde según sea necesario — consulta la [tabla de referencia de propiedades del borde](/docs/es/how-to-add-borders-to-an-image-in-markdown#understanding-the-border-property) arriba.
---
## Resultado
### Sin fronteras
### Con frontera
NOTA
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](/help/docs/es/how-to-add-shadows-to-an-image-in-markdown) para la sintaxis de sombras.
## Related
- [Cómo alinear la imagen en Markdown](/how-to-align-the-image-in-markdown.md)
- [Cómo añadir acordeón en Markdown](/how-to-add-accordion-in-markdown.md)
- [Cómo añadir espacio extra en Markdown](/how-to-add-extra-space-in-markdown.md)
- [Cómo centrar el texto en Markdown](/how-to-center-align-the-text-in-markdown.md)
- [Cómo añadir sombras a una imagen en Markdown](/how-to-add-shadows-to-an-image-in-markdown.md)
- [Cómo cambiar el color del texto en Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)