CSS Outline

La propiedad “outline” en CSS se utiliza para dibujar un borde alrededor de un elemento HTML, pero a diferencia de los bordes (border) esta propiedad no ocupa espacio dentro del diseño, es decir, no afecta al tamaño de la caja del elemento.

El borde del resaltado puede ser de un color, un estilo y un grosor específico y puede ser personalizado utilizando varias propiedades de CSS.

La sintaxis para establecer un borde de resaltado es la siguiente:

outline: [color] [style] [width];

Lenguaje del código: texto plano (plaintext)
  • outline-color: El color del borde de resaltado. Puede ser un color en formato RGB, hexadecimal, nombre de color, etc. También se puede establecer como «invert» que invierte el color del borde con respecto al fondo del elemento o «currentColor» que toma el color actual del texto.
  • outline-style: El estilo del borde de resaltado. Puede ser uno de los siguientes valores: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • outline-width: El grosor del borde de resaltado. Puede ser especificado en pixels (px), puntos (pt), picas (pc), milímetros (mm), centímetros (cm), pulgadas (in), puntos de pantalla (dppx), puntos de pantalla independiente (dpi), o en unidades relativas como em o %.

Ejemplo:

Ejemplo de uso de la propiedad “outline” para establecer un borde de resaltado verde de 2px de grosor con estilo “dotted” alrededor de un elemento con id “myDiv”:

#myDiv {
  outline: green dotted 2px;
}
Lenguaje del código: CSS (css)

También existen propiedades específicas para cada lado del borde de resaltado, como “outline-top”, “outline-right”, “outline-bottom” y “outline-left”, que le permiten establecer diferentes valores para cada lado del borde.

Otra propiedad útil es la “outline-offset” que te permite especificar la distancia entre el borde de resaltado y el elemento.

Es importante tener en cuenta que los bordes de resaltado no afectan al tamaño de la caja de un elemento, por lo que no afectan a la posición de otros elementos en la página.

También es importante tener en cuenta que los bordes de resaltado no son compatibles con todos los navegadores.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

HTML 5, JavaScript y CSS: Crea tu web y apps con el estánd...

Ver Ofertas en Amazon

La Guía de HTML5, CSS3 y JavaScript: 2ª Edición

Ver Ofertas en Amazon

Estilos de contorno

La propiedad «outline-style» en CSS es utilizada para establecer el estilo del borde de resaltado alrededor de un elemento. Los valores posibles para esta propiedad son:

  • none: No se dibuja ningún borde.
  • hidden: El mismo comportamiento que “none”.
  • dotted: El borde es dibujado con puntos.
  • dashed: El borde es dibujado con líneas discontinuas.
  • solid: El borde es dibujado con una línea continua.
  • double: El borde es dibujado con dos líneas paralelas.
  • groove: El borde es dibujado con un efecto “ranura” (3D).
  • ridge: El borde es dibujado con un efecto “cresta” (3D).
  • inset: El borde es dibujado con un efecto “empotrado” (3D).
  • outset: El borde es dibujado con un efecto “saliente” (3D).

Ejemplos

Aquí te dejo algunos ejemplos de código HTML y CSS que utilizan la propiedad «outline-style» con diferentes valores:

  1. Borde de resaltado con estilo “none”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: none;
        outline-color: blue;
        outline-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “dotted”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: dotted;
        outline-color: #ff0000;
        outline-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “dashed”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: dashed;
        outline-color: purple;
        outline-width: 3px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “solid”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: #00ff00;
        outline-width: 1px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “double”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: double;
        outline-color: #0000ff;
        outline-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “groove”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: groove;
        outline-color: #ffa500;
        outline-width: 3px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “ridge”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: ridge;
        outline-color: #800080;
        outline-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “inset”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: inset;
        outline-color: #006400;
        outline-width: 4px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con estilo “outset”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: outset;
        outline-color: #000000;
        outline-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

Espero que estos ejemplos te ayuden a entender aún más cómo usar diferentes valores de la propiedad “outline-style” en tus proyectos web.

Ancho de contorno

La propiedad “outline-width” en CSS se utiliza para establecer el grosor del borde de resaltado alrededor de un elemento.

Los valores posibles para esta propiedad son:

  • Un valor numérico seguido de “px” (por ejemplo, “2px”). Este valor establece el grosor del borde de resaltado en pixels.
  • Un valor numérico seguido de “em” (por ejemplo, “2em”). Este valor establece el grosor del borde de resaltado en relación al tamaño de la fuente del elemento.
  • Un valor numérico seguido de “%” (por ejemplo, «2 %»). Este valor establece el grosor del borde de resaltado en relación al ancho del elemento.
  • Una palabra clave como «thin», «medium» o «thick», que establecen un grosor predeterminado para el borde de resaltado. thin es equivalente a “1px”, medium es equivalente a “3px” y thick es equivalente a “5px” (estos valores pueden variar dependiendo del navegador).

Es importante tener en cuenta que algunos navegadores pueden tener un valor predeterminado para “outline-width” si no se especifica un valor.

Por lo tanto, es recomendable siempre especificar un valor para esta propiedad para garantizar un comportamiento consistente en todos los navegadores.

Ejemplos

Aquí te dejo algunos ejemplos de código HTML y CSS que utilizan la propiedad «outline-width» con diferentes valores:

  1. Borde de resaltado con grosor de 2px:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: blue;
        outline-width: 2px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con grosor de 0.5em:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        font-size: 16px;
        outline-style: solid;
        outline-color: #ff0000;
        outline-width: 0.5em;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con grosor del 10%:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: purple;
        outline-width: 10%;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con grosor predeterminado “thin”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: #00ff00;
        outline-width: thin;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con grosor predeterminado “medium”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: #0000ff;
        outline-width: medium;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)
  1. Borde de resaltado con grosor predeterminado “thick”:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: #ff00ff;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

Espero que estos ejemplos te ayuden a entender cómo utilizar diferentes valores para la propiedad “outline-width” en tus proyectos web.

Color de contorno

La propiedad “outline-color” en CSS se utiliza para establecer el color del borde de resaltado alrededor de un elemento. Puede ser especificado utilizando nombres de colores, valores hexadecimales, valores RGB o RGBA.

Ejemplo de uso de la propiedad “outline-color” para establecer un borde de resaltado de color azul alrededor de un elemento con id “myDiv”:

#myDiv {
  outline-color: blue;
}
Lenguaje del código: CSS (css)

También se puede utilizar en conjunto con las propiedades específicas para cada lado del borde de resaltado, como “outline-top-color”, “outline-right-color”, “outline-bottom-color” y “outline-left-color” para establecer diferentes colores para cada lado del borde.

Por ejemplo, para establecer un borde de resaltado de color rojo solo en el lado superior de un elemento con id “myDiv”:

#myDiv {
  outline-top-color: red;
}
Lenguaje del código: HTML, XML (xml)

Es importante mencionar que esta propiedad es utilizada en conjunto con outline-style y outline-width para dar formato completo al borde de resaltado.

Valores

Los valores posibles para la propiedad “outline-color” en CSS son:

  • Nombres de colores, como blue, red, green, etc.
  • Valores hexadecimales, como #0000ff para azul o #ff0000 para rojo.
  • Valores RGB, como rgb(0, 0, 255) para azul o rgb(255, 0, 0) para rojo.
  • Valores RGBA, como rgba(0, 0, 255, 0.5) para un azul semi-transparente o rgba(255, 0, 0, 0.8) para un rojo con una transparencia del 80%.
  • La palabra clave transparent para hacer que el borde sea transparente.

Ejemplos

#myDiv {
  outline-color: blue;
}

#myDiv {
  outline-color: #ff0000;
}

#myDiv {
  outline-color: rgb(0, 255, 0);
}

#myDiv {
  outline-color: rgba(255, 0, 0, 0.5);
}

#myDiv {
  outline-color: transparent;
}
Lenguaje del código: CSS (css)

Es importante tener en cuenta que algunos navegadores pueden tener un valor predeterminado para “outline-color” si no se especifica un valor.

Por lo tanto, es recomendable siempre especificar un valor para esta propiedad para garantizar un comportamiento consistente en todos los navegadores.

Desplazamiento de contorno

La propiedad “outline-offset” en CSS se utiliza para establecer la distancia entre el borde de resaltado y el borde del elemento. Es utilizado para dar un efecto de desplazamiento al borde de resaltado. El valor puede ser especificado utilizando un valor numérico seguido de “px” o “em”.

Ejemplo de uso de la propiedad “outline-offset” para establecer un desplazamiento de 5px para el borde de resaltado de un elemento con id “myDiv”:

#myDiv {
  outline-style: solid;
  outline-color: blue;
  outline-offset: 5px;
}
Lenguaje del código: CSS (css)

También se puede utilizar en conjunto con las propiedades específicas para cada lado del borde de resaltado, como “outline-top-offset”, “outline-right-offset”, “outline-bottom-offset” y “outline-left-offset” para establecer diferentes desplazamientos para cada lado del borde.

Por ejemplo, para establecer un desplazamiento de 3px solo en el lado superior de un elemento con id “myDiv”:

#myDiv {
  outline-top-offset: 3px;
}
Lenguaje del código: CSS (css)

Es importante mencionar que esta propiedad se utiliza en conjunto con outline-style y outline-color para dar formato completo al borde de resaltado y para poder visualizar el desplazamiento.

Ejemplos

Aquí te dejo algunos ejemplos de código HTML completo utilizando la propiedad “outline-offset”:

  1. Ejemplo con borde de resaltado de color rojo y un desplazamiento de 5px:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: red;
        outline-offset: 5px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>Lenguaje del código: HTML, XML (xml)
  1. Ejemplo con borde de resaltado de color azul y un desplazamiento de 0.5em:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myDiv {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        outline-style: solid;
        outline-color: blue;
        outline-offset: 0.5em;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Contenido del div</div>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

Espero que estos ejemplos te ayuden a entender cómo utilizar la propiedad “outline-offset” en tus proyectos web.