Propiedad de estilo de contorno CSS
Ejemplo
Establezca un estilo para el contorno:
div {outline-style: dotted;}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
Un contorno es una línea que se dibuja alrededor de los elementos, fuera de los bordes, para que el elemento "resalte".
La outline-style
propiedad especifica el estilo de un esquema.
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS2 |
Sintaxis de JavaScript: | objeto .style.outlineStyle="discontinuado" |
Consejos y notas
Nota: ¡Los contornos difieren de los bordes ! A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Sintaxis CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
none | Specifies no outline. This is default | |
hidden | Specifies a hidden outline | |
dotted | Specifies a dotted outline | |
dashed | Specifies a dashed outline | |
solid | Specifies a solid outline | |
double | Specifies a double outliner | |
groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Un contorno discontinuo:
div {outline-style: dashed;}
Ejemplo
Un esquema sólido:
div {outline-style: solid;}
Ejemplo
Un doble esquema:
div {outline-style: double;}
Ejemplo
Un contorno de ranura:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Ejemplo
Un contorno de cresta:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Ejemplo
Un esquema insertado:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Ejemplo
Un esquema inicial:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Ejemplo
Establezca el estilo de un esquema usando diferentes valores:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
páginas relacionadas
Tutorial de CSS: esquema de CSS
Referencia CSS: propiedad de contorno
Referencia HTML DOM: propiedad outlineStyle