CSS outline property

Property values

outline-width

mediumDefault

medium value represents medium sized outline. thin<medium<thick

outline-side: medium;

Try it { }

thin

thin value defines thin outline .

outline-width: thin;

Try it { }

thick

thick value defines a thick outline.

outline-side: thick;

Try it { }

+ve length

10

lenght defines the width of outline. The used units might be px, in, em, pt.

outline-width: 10px;

Try it { }

outline-style

noneDefault

There is no style. In this case, the color and width of outline are also ignored i.e. 0px outline.

outline-style: none;

Try it { }

dashed

The outline consists of a series of square shaped dashes.

outline-style: dashed;

Try it { }

dotted

The outline consists of a series of round dots.

outline-style: dotted;

Try it { }

solid

The outline consists of a solid line.

outline-style: solid;

Try it { }

double

The outline consists of two lines. The total ouline-width equals to the two lines and space between them.

outline-style: double;

Try it { }

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the outline-color.

The outer side of the outline is darker than the inner side of the outline.

outline-style: ridge;

Try it { }

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the outline is darker than the outer side of the outline.

outline-style: groove;

Try it { }

inset

The color of top and left borders is darker than outline-color but the color of right and bottom borders is the same as outline-color.

The effect of inset value can be observed in outline.

outline-style: inset;

Try it { }

outset

The color of top and left sides is the same as outline-left but the color of right and bottom sides is darker than outline-color.

The effect of inset value can be observed in outline.

outline-style: outset;

Try it { }

outline-color

currentColorDefault

currentColor keyword represents the same color for the top side border as of text color.

outline: currentColor;

Try it { }

color-name

The following demo represents skyblue color for the top side border.

outline: skyblue;

Try it { }

rgb value

#000000

It represents rgb value of a color.

The hexadecimal value of red color for the top side border is given below.

outline: rgb(255,0,0);

Try it { }

hexadecimal value

#000000

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the top side border is given below.

outline: #0000ff;

Try it { }