The concept of outlines is similar to using borders on elements. Do not confuse or replace borders with outlines, they have different meanings. Outlines are useful because they allow you to highlight an element in order to draw attention to it in some situation. Outlines are located outside the element, just outside its borders.
An outline in CSS 3 is represented by the outline property , although this property is shorthand for the following properties:
- outline-color : outline color
- outline-offset : outline offset
- outline-style : outline style. It takes the same values as border-style:
- none: no outline
- solid: outline as a regular line
- dashed: dashed line
- dotted: line as a sequence of points
- double: Outline in the form of two parallel lines
- outline-width : the thickness of the outline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline in CSS3</title>
</head>
<body>
<div>Outline in CSS3</div>
</body>
</html>
Using a property outline, this contour definition can be shortened as follows:
outline: red dashed 2px;