CSS Contornos

Agrega un contorno a los textos para resaltarlos, decora botones y formularios.


Contornos con CSS


Los contornos o outlines son líneas que se encuentran alrededor de objetos visuales tales como botones, formularios activos o mapeado de imágenes.

Los contornos se diferencian de los bordes en:

  • Los contornos no ocupan espacio
  • Los contornos no necesariamente son rectangulares

Un contorno definido con la propiedad outline es dibujado "fuera" de la caja y siempre se encuentra por encima del elemento y no afecta a las cajas anexas a este.


El espesor de los contornos

La propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede aplicar a todos los elementos.

Sintaxis

<head>
<style="type:text/css">
selector {outline-width: valor}
</style>
</head>

Los posibles valores para definir el espesor de los contornos

thin | medium | thick | tamaño (px, pc, pt, mm, cm, in)

Ejemplo

Vamos a aplicar un espesor determinado para el contorno de un botón.

Código
<head>
<style type="text/css">
button
{

outline-width: 3px;
outline-style: solid;
}
</style>
</head>

<body>
<button>Enviar</button>
</body>
Resultado
Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style

El estilo de los contornos

La propiedad outline-style especifica el estilo del contorno. Esta propiedad se puede aplicar a todos los elementos.

Sintaxis

<head>
<style="type:text/css">
selector {outline-style: valor}
</style>
</head>

Los posibles valores para definir el estilo de los contornos

none | dotted | dashed | solid | double | groove | ridge | inset | outset

Ejemplo

Vamos a aplicar un estilo determinado para el contorno de un botón.

Código
<head>
<style type="text/css">
button
{

outline-style: dotted;
}
</style>
</head>

<body>
<button>Enviar</button>
</body>
Resultado

El color de los contornos

La propiedad outline-color especifica el color del contorno. Esta propiedad se puede aplicar a todos los elementos.

Sintaxis

<head>
<style="type:text/css">
selector {outline-color: valor}
</style>
</head>

Los posibles valores para definir el estilo de los contornos

color | invert

Ejemplo

Vamos a definir un color determinado para el contorno de un texto.

Código
<head>
<style type="text/css">
p
{

outline-color: blue;
outline-style: solid;
}
</style>
</head>

<body>
<p>Texto rodeado de un contorno de color azul</p>
</body>
Resultado

Texto rodeado de un contorno de color azul

Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style

La propiedad general de los contornos

La propiedad outline especifica todas las propiedades de los contornos de una sola vez.

Sintaxis

<head>
<style="type:text/css">
selector {outline: valor-1 valor-2 valor-n}
</style>
</head>

Los posibles valores para la propiedad outline

thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | none | dotted | dashed | solid | double | groove | ridge | inset | outset | color | invert

Ejemplo

Vamos a aplicar todos los valores al contorno de un botón.

Código
<head>
<style type="text/css">
button{outline: groove red thick}
</style>
</head>

<body>
<button>Enviar</button>
</body>
Resultado

PropiedadDescripciónValoresDetallesEj.
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 Ejemplo de como definir un contorno fino
medium Medio Ejemplo de un contorno de espesor medio
thick Grueso Ejemplo de un contorno grueso
longitud Longitud Ejemplo del espesor de un contorno definido con pixels
outline-style Estilo del contorno.
No funciona en IE 5, 6 y 7
none Nada Ejemplo de un elemento sin contorno
hidden Oculta Ejemplo de un contorno oculto
dotted Punteada Ejemplo de un contorno punteado
dashed Líneas de rayas Ejemplo de un contorno rayado
solid Solida Ejemplo de un contorno solido
double Doble Ejemplo de un contorno doble
groove Acanalado Ejemplo de un contorno acanalado
ridge En relieve Ejemplo de un contorno en relieve
inset Recuadro Ejemplo de un contorno recuadrado
outset Resalte Ejemplo de un contorno resaltado
outline-color Color del contorno.
No funciona en IE 5, 6 y 7
color Color Ejemplo de como definir el color de un contorno
invert Color inverso al color de fondo Ejemplo de un contorno de color inverso al color de fondo


<<< Fuentes - Font en CSS Lista - List en CSS >>>

En la Web