outline

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propiedad CSS outline es una forma reducida para establecer una o más de las propiedades individuales de contorno outline-style, outline-width y outline-color en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.

Pruébalo

Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.

Border vs outline

Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:

Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con border.
Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A diferencia de los bordes, el contorno no está abierto en algunos lados:
```

 Ejemplo: contorno aplicado a 
 varias líneas



 Ejemplo: borde aplicado a 
 varias líneas

```
must be provided

Valor inicial	as each of the properties of the shorthand: `outline-width`: `medium` `outline-style`: `none` `outline-color`: `auto`
Applies to	all elements
Heredable	no
Valor calculado	as each of the properties of the shorthand: `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0` `outline-style`: como se especifica `outline-color`: For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
Animation type	as each of the properties of the shorthand: `outline-width`: a length `outline-style`: by computed value type `outline-color`: a color

Sintaxis

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Valores

Uno, dos o tres valores, en orden arbitrario:

<outline-width>: Ver outline-width.
<outline-style>: Ver outline-style.
<outline-color>: Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad color del elemento (color de primer plano). Ver outline-color.

Sintaxis formal

outline = 
  <'outline-width'>  ||
  <'outline-style'>  ||
  <'outline-color'>  

<outline-width> = 
  <line-width>  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-color> = 
  auto        |
  <color>     |
  <image-1D>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Example

HTML

html

<a href="#">Este link tiene un estilo especial para el foco</a>

CSS

css

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Result

Especificaciones

Specification
CSS Basic User Interface Module Level 4 # outline

Compatibilidad con navegadores

BCD tables only load in the browser