Atributo border de la etiqueta <img> de HTML
Ejemplo
El siguiente HTML puede generar diferentes bordes de imágenes con diferentes grosores:
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="1" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="2" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="4" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="8" /> </a> </body> </html>
Definición y uso
El atributo de borde del etiqueta <img> especifica el ancho del borde alrededor de la imagen, lo que significa que se puede aumentar o quitar el borde de la imagen.
Notas:Por defecto, las imágenes no tienen borde (a menos que la imagen esté dentro de un elemento <a>).
Los navegadores generalmente mostrarán imágenes que representan enlaces (por ejemplo, imágenes que contienen etiquetas <a>) dentro de un borde de 2 píxeles de ancho para indicar que el lector puede seleccionar esta imagen para acceder al documento asociado.
Con el atributo de borde y un valor de ancho en píxeles, puede quitar (border="0") o ensanchar el borde de la imagen.
Nota:Este atributo ya no se recomienda en HTML 4 y XHTML, y también debe ser reemplazado por el estilo, pero aún es bien soportado por los navegadores populares.
Compatibilidad del navegador
A pesar de que no se recomienda usar el atributo de borde, todos los navegadores populares lo admiten.
Consejos y notas
Notas:No se recomienda usar el atributo "border" de la imagen en HTML 4.01. En XHTML 1.0 Strict DTD y HTML 5, ya no se admite esta propiedad.
Consejo:Use Propiedad de borde de CSS para cambiar el estilo del borde del elemento. Puede usar la propiedad de borde de CSS en una hoja de estilos externa para establecer un borde uniforme para todas las imágenes del sitio. Comparado con establecer el atributo de borde para una imagen individual, este método es sin duda más eficiente.
Notas de compatibilidad
No se recomienda usar el atributo de borde del elemento img; en HTML 4.01 Strict y XHTML 1.0 Strict DTD, no se admite el atributo de borde del elemento img.
Use CSS en su lugar.
Sintaxis de CSS: <img style="border:5px solid black">
Ejemplo de CSS: Borde de imagen
En nuestra lección de CSS, puede encontrar más información sobre Atributo de borde detalles.
Sintaxis
<img border="value" />
Valor del atributo
| Valor | Descripción |
|---|---|
| pixels | Ancho del borde, en píxeles. |
Ejemplo de TIY
- Atributo de borde del etiqueta <img>
- Este ejemplo muestra cómo usar el atributo border de la etiqueta <img> para cambiar el borde de la imagen.
Leer más: Eliminar los bordes de las imágenes
Al usar el atributo border="0" en la etiqueta <img>, puedes quitar el borde alrededor del hipervínculo de la imagen. Para ciertas imágenes, especialmente las que son mapas de imágenes, no tener bordes puede mejorar el aspecto de la página. Y para aquellos botones que claramente indican que apuntan a otras imágenes, sin bordes, la imagen puede verse mejor.
Aunque quitar los bordes no reducirá la accesibilidad del documento, siempre es bueno ser cauteloso. Porque sin bordes significa que se ha eliminado una indicación visual común de hipervínculo, lo que puede hacer que los lectores no encuentren estos vínculos tan fácilmente como antes. Los navegadores generalmente cambian la forma del puntero del ratón cuando se mueve sobre una imagen de hipervínculo, pero no se puede esperar que los navegadores siempre lo hagan, y mucho menos permitir que los usuarios busquen entre imágenes sin borde para encontrar esos vínculos ocultos.
Recomendamos encarecidamente que utilices otros métodos al mismo tiempo que las imágenes sin borde, para que tus lectores sepan que deben hacer clic en estas imágenes. Incluso con texto simple, es difícil hacer que el documento sea más accesible para los lectores.
