CSS Contornos

Contornos con CSS

Los contornos son líneas que se encuentran alrededor del elemento, por afuera del borde, con el fín de hacerlo resaltar.
Podemos especificar el estilo, el ancho y el color de los contornos con la propiedad "outline".

Un ejemplo de estilos

Código


<html>
<head>
 <style type="text/css">
  p{outline-style: dotted}
 </style>
</head>

<body>
 <p>Este texto tiene una línea de puntos alrededor.</p>
</body>
</html>

Resultado

Este texto tiene una línea de puntos alrededor.

Nota: los contornos no funcionan en el navegador Internet Explorer.

Un ejemplo de ancho y color

Código


<html>
<head>
 <style type="text/css">
  p{
  outline-style: solid;
  outline-width: thick;
  outline-color: #FF0000
  }
 </style>
</head>

<body>
 <p>Este texto tiene un contorno grueso de color rojo.</p>
</body>
</html>

Resultado

Este texto tiene un contorno grueso de color rojo.

Nota: para que se visualice el ancho(outline-width) es necesario definir el estilo solido(outline-style: solid) de lo contrario no se visualizará.

Tabla de las propiedades de las líneas exteriores

Propiedad	Descripción	Valores	Detalles
outline	Propiedades individuales de los contornos. No funciona en IE 5, 6 y 7	outline-color	Color de la línea
		outline-style	Estilo de la línea
		outline-width	Ancho de la línea
outline-width	Ancho del contorno. No funciona en IE 5, 6 y 7	thin	Fino
		medium	Medio
		thick	Grueso
		longitud	Longitud
outline-style	Estilo del contorno. No funciona en IE 5, 6 y 7	none	Nada
		hidden	Oculta
		dotted	Punteada
		dashed	Líneas de rayas
		solid	Solida
		double	Doble
		groove	Ranurada
		ridge	Loma
		inset	Bajo relieve
		outset	En relieve
outline-color	Color del contorno. No funciona en IE 5, 6 y 7	color	Color
outline-color	Color del contorno. No funciona en IE 5, 6 y 7	invert	Color inverso al color de fondo