Borders and outlines are extremely similar, yet there are some significant differences as well. An outline does not occupy any room. Not all outlines must be square or rectangular. We cannot give distinct values for the sides of an element since the outline is always the same on all sides.
A line can be drawn outside an element’s borders or around it using the outline property. The element’s dimensions do not include its outline.
The design of an outline depends on a few factors. Changes can be made to the outline’s style, colour, and width as well as its distance from the border and corner angles using its outline-offset and border-radius properties.
Outline properties
There are four different categories for outline properties, outline-style, outline-color, outline-width and outline-offset. The outline’s width can be customized using the outline-width property. The line style for the outline is set using the outline-style property. The outline’s color and its offset from the border are controlled by the outline-color and outline-offset properties, respectively.
outline-style
The outline-style attribute describes the type of line that surrounds an element, such as solid, dotted, or dashed. It may accept one of the values listed below.
A dotted value design dotted an outline. A dashed value design dashed an outline. Solid value indicates a solid outline. A double outline is defined by a double value. Using the values groove, ridge, and inset, one can define a 3D grooved outline, 3D ridged outline, and 3D inset outline. A 3D outset outline is defined by the outset value. Hidden value defines a hidden outline, and none value defines no outline.
Example:
//HTML
<h1>dashed</h1>
<h2>solid</h2>
<h3>double</h3>
<h4>groove</h4>
<h5>ridge</h5>
//CSS
h1{outline-style: dashed;}
h2{outline-style: solid;}
h3{outline-style: double;}
h4{outline-style: groove;}
h5{outline-style: ridge;}
Syntax is similar to border property.
outline-width
The width of the outline that will be added to the box is specified by the outline-width parameter. Similar to the border-width attribute, its value should either be a length or one of the values: thin, medium, or thick. When the width is zero, there is no outline.
Height and Width property in CSS
Thin, it varies by user’s computer. comparable to typically 1px in desktop browsers, depending on the user agent, media. comparable to typically 3px in desktop browsers. Depending on the user agent, thick. comparable to typically 5px in desktop browsers.
Example:
//CSS
h1 {
outline-style: dashed;
outline-width: thin;
}
h2 {
outline-style: solid;
outline-width: medium;
}
h3 {
outline-style: double;
outline-width: 4px;
}
h4 {
outline-style: groove;
outline-width: thick;
}
h5 {
outline-style: ridge;
outline-width: 0.7em;
} 
outline-color
You can control the color of the outline by setting the outline-color attribute. Similar to the color and border-color attributes, its value should either be a color name, a hex color, or an RGB value. invert, Performs a colour inversion on the background to make sure the outline is visible.
The fact that browsers are not required to accept this value makes this keyword invalid if they do.
Example:
//CSS
h1 {
outline-style: dashed;
outline-width: thin;
outline-color: red;
}
h2 {
outline-style: solid;
outline-width: medium;
outline-color: #ff23cc;
}
h3 {
outline-style: double;
outline-width: 4px;
outline-color: rgba(200, 212, 122);
}
h4 {
outline-style: groove;
outline-width: thick;
outline-color: blue;
}
h5 {
outline-style: ridge;
outline-width: 0.7em;
outline-color: #f333;
}
outline shorthand property
The outline property serves as a shortcut for configuring the outline-width, outline-style (which is necessary), and outline-color. One, two, or three values from the given list can be used to specify the outline property. It doesn’t matter what order the values are in.
Example:
h1{
outline: 2px dashed red;
}
outline-offset
An outline and an element’s edge or border are separated by space added by the outline-offset attribute. Transparency exists between an element and its outline.
The distance between an element and its outline is measured by the outline-offset property. With a negative value, the outline is contained inside the element. With a value of 0, the outline is positioned so that it is directly adjacent to the element.
Example:
h2{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 5px;
}
Conclusion
Outline elements are not included in dimensions, which is the difference between the outline and border properties. But they are a component of the border. Element Size is unaffected by the outline. Though the element Size is impacted by the boundary. One cannot round an outline.
If you have any questions or problems related to outline property don’t forget to comment below.
Thankyou for reading!
Written by : Vipin
