Eliminar contornos con CSS

Los contornos son unas lineas punteadas que aparecen cuando se han seleccionado los enlaces, estos contornos se muestran alrededor de los enlaces para resaltarlos e indicar que el enlace tiene el foco. Estos contornos se pueden controlar con estilos mediante la propiedad outline.

outline.gif

Esta propiedad tiene tres parámetros con el cual podemos controlar su apariencia: ancho, estilo y color, como se muestra a continuación.

[css]
outline: ancho estilo color;
[/css]

Los valores para estas propiedades son:

  • ancho: thin (fino), medium (mediano) o thick (grueso).
  • estilo: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • color: el cual es el código hexadecimal del color (Ej: #666666).

Luego por ejemplo si tenemos un enlace al cual deseamos que al ser seleccionado tenga un contorno de color rojo solido de un pixel de ancho se tendría el siguiente código:

  1. <a href="index.php" style="outline:thin solid #CC0000;">Home</a>

Pero si deseamos que todos los enlaces de nuestra página tengan esta misma propiedad, creamos un estilo de la siguiente forma:

[css]
a { outline: thin solid #CC0000; }
[/css]

Finalmente si deseamos que no se muestre ningún contorno, pues en la mayoría de los casos es un elemento visual que deseamos no mostrar el código sería el siguiente:

[css]
a { outline: none; }
[/css]

Comentarios Total 4 comentarios


Gustavo
Publicado: 20/07/2007 7:51 pm

Yo para sacarlos uso style=”border:none”

Eliminando los contornos con CSS
Publicado: 13/08/2007 11:43 am

[…] Gracias a unjimpe nos llega este tutorial, de como eliminar los bordes de los vínculos utilizando el CSS. […]


[…] to unjimpe we have this tutorial, of how to get rid of contours in […]

vikma
Publicado: 18/04/2009 5:51 pm

no entendi muy bien, necesito k en una imagen como vinculo no se muestre lineas punteadas al borde, donde coloco ese codigo?… de antemano gracias por la ayuda…

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)