outline-style

❮ Назад CSS Справочник Далее ❯

Example

Set a style for the outline:

div {outline-style: dotted;}

Try it Yourself »

Definition outline-style

Подработка: Перевод страницы

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

The outline-style property specifies the style of anoutline.

Show demo ❯

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.outlineStyle="dashed" Try it

Tips and Notes outline-style

Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Browser Support outline-style

The numbers in the table specify the first browser version that fully supports the property.

Property
outline-style	1.0	8.0	1.5	1.2	7.0

CSS Syntax outline-style

Property Values outline-style

Value	Description	Demo
none	Specifies no outline. This is default	Demo ❯
hidden	Specifies a hidden outline	Demo ❯
dotted	Specifies a dotted outline	Demo ❯
dashed	Specifies a dashed outline	Demo ❯
solid	Specifies a solid outline	Demo ❯
double	Specifies a double outliner	Demo ❯
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value	Demo ❯
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value	Demo ❯
inset	Specifies a 3D inset outline. The effect depends on the outline-color value	Demo ❯
outset	Specifies a 3D outset outline. The effect depends on the outline-color value	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples outline-style

Example

A dashed outline:

div {outline-style: dashed;}

Try it Yourself »

Example

A solid outline:

div {outline-style: solid;}

Try it Yourself »

Example

A double outline:

div {outline-style: double;}

Try it Yourself »

Example

A groove outline:

div {
    outline-style: groove;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

A ridge outline:

div {
    outline-style: ridge;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

An inset outline:

div {
    outline-style: inset;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

An outset outline:

div {
    outline-style: outset;
    outline-color: coral;
    outline-width: 7px;
}

Try it Yourself »

Example

Set the style of an outline using different values:

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;}

Try it Yourself »