CSS

CSS Contornos

<<< Bordes - Border en CSS Márgenes - Margin en CSS >>>

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	Acanalado
		ridge	En relieve
		inset	Recuadro
		outset	Resalte
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