CSS

CSS Contornos

Agrégale un contorno a los textos para resaltarlos.

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

¿No encuentras lo que buscas?

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

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...

CSS

Básico

Avanzado

Ejemplos y Examen

Guías de referencia