Contorno de CSS

Este elemento tiene un borde negro y un contorno azul, de 10px de ancho.

Contorno de CSS

El contorno es una línea dibujada alrededor del elemento, fuera del borde, para resaltar el elemento.

CSS tiene las siguientes propiedades de contorno:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Atención:El contorno conBorde¡Diferentes! La diferencia radica en que el contorno se dibuja fuera del borde del elemento y puede superponerse a otros contenido. Del mismo modo, el contorno no es parte del tamaño del elemento; el ancho y la altura total del elemento no se ven afectados por el ancho de la línea de contorno.

Estilo de contorno de CSS

La propiedad outline-style especifica el estilo del contorno y puede establecer los siguientes valores:

  • punteado - Definir un contorno punteado.
  • punteado - Definir un contorno punteado.
  • sólido - Definir un contorno sólido.
  • doble - Definir un contorno doble.
  • hundido - Definir un contorno hundido en relieve 3D.
  • saliente - Definir un contorno saliente en relieve 3D.
  • hundido - Definir un contorno hundido 3D.
  • saliente - Definir un contorno saliente 3D.
  • ninguno - Definir sin contorno.
  • oculto - Definir un contorno oculto.

El siguiente ejemplo muestra diferentes valores de outline-style:

Ejemplo

Se muestra diferentes estilos de contorno:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Resultado:

Borde punteado.

Borde discontinuo.

Borde sólido.

Borde doble.

Borde rebajado 3D. Este efecto depende del valor outline-color.

Borde rebajado 3D. Este efecto depende del valor outline-color.

Borde rebajado 3D. Este efecto depende del valor outline-color.

Borde perfilado 3D. Este efecto depende del valor outline-color.

¡Pruebelo usted mismo!

Atención:A menos que se establezca outline-style La propiedad outline no tiene efecto, a menos que se establezca (se detallará en el siguiente capítulo)!