Just like the CSS border property, the CSS Outline is used to render an additional border around an element to gain visual attention.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid black;
outline: red solid 15px;
margin-top: 30px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we displayed the use of the CSS Outline property.
Difference between the CSS Border and CSS Outline properties:
The CSS border and outline properties have some very important differences between them:
- We can’t apply a separate outline width, style, and color for each side of an element in CSS Outline. However, we can apply a separate outline width, style, and color for each side of an element in CSS Border.
- Being not a part of the element’s dimension, the CSS Outline doesn’t change the dimensions of an element, no matter how thick an outline is applied to the element. However, the CSS border is a part of the element’s dimension.
Example: Difference between outline and border.
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: lightpink;
outline: 10px solid red;
outline-offset: 6px;
margin-top: 30px;
text-align: center;
border: 5px solid crimson;
padding: 5px;
}
</style>
<div class="box">Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we demonstrate the use of the CSS outline and the border properties.
Outline-width:
The CSS outline-width property can either take an absolute value or a relative value. It can also take a predefined value either of thin, medium, or thick. It thus works similarly to the CSS margin and padding properties. However, it is recommended to use either an absolute value or a relative value for the CSS outline width property. For the predefined values, different browsers can interpret them differently.
Outline-color:
To define a color for the outline, the CSS Outline-color property is used. All the colors available in HTML and CSS are supported by the CSS Outline-color property.
Outline-style:
Styles like hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset, can be added to an outline, using the CSS Outline-style property is used.
The outline-width, outline-style, and outline-color properties can be used alone, or as a shorthand property.
Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
background-color: yellow;
border: 5px solid orange;
padding: 5px;
margin-top:30px;
outline-width: 10px;
outline-style: solid;
outline-color: red;
text-align: center;
}
</style>
</head>
<body>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we have displayed the use of the three outline properties, i.e., Outline-width, Outline-color, and Outline-style.
Example: To demonstrate the usage of different outline styles.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
outline-color: red;
outline-width: 7px;
margin: 10px;
float: left;
border: 5px solid yellow;
padding: 5px;
}
</style>
</head>
<body>
<div style="outline-style: dashed;">Hello World!!</div>
<div style="outline-style: dotted;">Hello World!!</div>
<div style="outline-style: double;">Hello World!!</div>
<div style="outline-style: groove;">Hello World!!</div>
<div style="outline-style: inset;">Hello World!!</div>
<div style="outline-style: outset;">Hello World!!</div>
<div style="outline-style: ridge;">Hello World!!</div>
<div style="outline-style: solid;">Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are displaying the behavior of different outline styles.
Outline offset:
To build a distance between the outline and the border, the CSS outline offset property is used. The value of the CSS outline offset property is a CSS length unit. There is a transparent space between the border and the outline. The background color of the parent element is then taken.
Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
background-color: lightblue;
outline: 10px solid blue;
outline-offset: 5px;
margin-top: 30px;
text-align: center;
border: 5px solid grey;
padding: 5px;
}
</style>
</head>
<body>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we demonstrate the use of the CSS outline offset property.