CSS3 An instance of how outline adds a contour to a DIV element

CSS3 Outline add contour lines to div elements

Sometimes for a more beautiful style, you can add contour lines to the div appropriately. This can be achieved through the outline property.

Outline contains the following property values;

Outline-width: The thickness of the contour line.

The value of this property contains 4 parameters: Thin,medium,thick,length

Thin: Define fine outlines;

Medium: Defines the medium profile;

Thick: Defines a rough outline.

Length: You can specify the thickness of the contour line, note that this value cannot be negative;

Outline-style: The style of the contour line.

Common parameters for this property:

None: When set to none, the outline is not displayed.

Dotted: dot contour line,

Dashed: Dashed contour line,

Solid: solid contour line.

Outline-color: The color of the contour line

Parameters for this property:

Color name: (red);

RGB color value: rgb (255,255,255);

Hexadecimal color values: such as: #ff0000;

Outline-offset: The offset value of the contour line from the container. When this value is negative, a contour line is displayed to the inside of the container.

The sample code is as follows:

<! DOCTYPE html>