CSS - Contornos

Los contornos son muy similares a las fronteras, pero también hay algunas diferencias importantes:

Un esquema no ocupa espacio.
Los contornos no tienen por qué ser rectangulares.
El contorno es siempre el mismo en todos los lados; no puede especificar valores diferentes para los diferentes lados de un elemento.

NOTE - Las propiedades de esquema no son compatibles con IE 6 o Netscape 7.

Puede establecer las siguientes propiedades de esquema mediante CSS.

los outline-width La propiedad se utiliza para establecer el ancho del contorno.
los outline-style se utiliza para establecer el estilo de línea del contorno.
los outline-color La propiedad se utiliza para establecer el color del contorno.
los outline La propiedad se utiliza para establecer las tres propiedades anteriores en una sola declaración.

La propiedad de ancho de contorno

La propiedad outline-width especifica el ancho del contorno que se agregará al cuadro. Su valor debe ser una longitud o uno de los valores delgado, medio o grueso, al igual que el atributo border-width.

Un ancho de cero píxeles significa que no hay contorno.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad de estilo de contorno

La propiedad de estilo de contorno especifica el estilo de la línea (sólida, punteada o discontinua) que rodea un elemento. Puede tomar uno de los siguientes valores:

none- Sin borde. (Equivalente de contorno-ancho: 0;)
solid - El contorno es una sola línea sólida.
dotted - El contorno es una serie de puntos.
dashed - El esquema es una serie de líneas cortas.
double - El contorno es de dos líneas continuas.
groove - El contorno parece tallado en la página.
ridge - El contorno parece lo opuesto al surco.
inset - El esquema hace que parezca que el cuadro está incrustado en la página.
outset - El contorno hace que parezca que la caja está saliendo del lienzo.
hidden - Igual que ninguno.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad de color de contorno

La propiedad de color de contorno le permite especificar el color del contorno. Su valor debe ser un nombre de color, un color hexadecimal o un valor RGB, como ocurre con las propiedades de color y color de borde.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad del esquema

La propiedad de esquema es una propiedad abreviada que le permite especificar valores para cualquiera de las tres propiedades discutidas anteriormente en cualquier orden pero en una sola declaración.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Producirá el siguiente resultado: