Outline is used to markup elements to make them stand out.
Outline doesn’t affects the position of the element.
outline-width
This property is used to specify the width of the outline.
Applicable values: thin, medium, thick
Or else the values should be specified in pixels e.g., 2px
outline-style
This property specifies the line style of the outline.
Applicable values:
none – no outline
hidden – Same as ‘none’, except in terms of outline conflict resolution for table elements.
dotted – The outline is a series of dots.
dashed – The outline is a series of short line segments.
solid – The outline is a single line segment.
double – The outline is two solid lines. The sum of the two lines and the space between them equals the value of ‘outline-width’.
groove – The outline looks as though it were carved into the canvas.
ridge – The opposite of ‘groove’: the outline looks as though it were coming out of the canvas.
inset – The outline makes the box look as though it were embedded in the canvas.
outset – The opposite of ‘inset’: the outline makes the box look as though it were coming out of the canvas.
outline-color
This property specifies the color of the outline.
HTML snippet:
<div>
Hello world! This is a <span class="outline">sample</span> text.
</div>CSS snippet:
div{
background-color : #e1e1e1;
padding : 25px;
margin-bottom:10px;
}
.outline{
outline-width : 2px;
outline-style : dashed;
outline-color : #f00;
padding : 5px;
margin : 10px;
}Output:
The outline is applied to the <span> element.
