Mientras que en cualquier navegador se visualizan los pequeños puntitos, en IE aparecen groseras lineas. Es por eso que en Foobr dan la solución más simple y práctica para este problema: Reemplazar el borde por una pequeña imagen.

En el caso de un DIV tenemos el siguiente HTML:

HTML

<div id='dotted'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at erat. Sed vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend laoreet eros. Pellentesque ac turpis vel purus facilisis aliquet.</p>
</div>

Utilizando una pequeña imagen de 2 px X 2 px con un poco de CSS solucionamos el problema:

CSS

#dotted {
background: #FFF url(border-grid.gif);
padding: 1px;
}
#dotted p {
background: #FFF;
margin: 0;
}

Y el resultado será:

Pero este ejemplo se aplica a DIVS, en el caso que queramos bordes punteados para links, tendremos que utilizar otra imágen , en este caso de 2 px X 1px y de CSS:

CSS

a{
text-decoration:none;
background: #FFF url(borde.gif) repeat-x right bottom;
}

Y el resultado:

Autor: Leandro
http://www.leandrodonofrio.com/recursos/dise%f1o/css-tip-arreglar-los-bordes-punteados-en-internet-explorer/

Usuarios que han visto este tema también han visto...

- Ocultar imagenes
- Qué son las capas
- Aproximación al problema del color: imagen vs CSS
- CSS para imprimir páginas web

- Versión imprimible de este documento

- Enviar por e-mail este documento