Updated June 14, 2023
Definition of CSS Outline Property
CSS outline property helps you to tweak the styling, width, and coloring of the outline of an element of an HTML page with the use of CSS, which is basically a line outside the area of the border of an element to make the element limelight which may be required in your web page designing to bring user attention to that element. In this article, I will put you through the techniques with some illustrations that you can put in your code to make some elements with the desired outline to make them stand out from the other elements of the HTML page.
Syntax and Parameters
CSS outline properties are basically useful for tweaking the style and design of the element outline. CSS possesses the following properties in the outline that are outside the border of an element: Outline Style, Color, width, and offset.
- Outline style defines the type of outline, which is of many types:
Groove, double, dashed, inset, solid, dotted, ridge, outset
Syntax for Outline Style:
body
{
outline-style:<name of style>;
}- Outline color defines the color of the outline
Syntax for Outline Color:
body
{
outline-color:<name of color>;
}- Outline width defines the thickness of the outline
Syntax for Outline Width:
body
{
outline-width:<value of thickness>;
}- Outline offset defines the gap between the border and the outline of an element
Syntax for Outline Offset:
body
{
outline-offset:<value of offset>;
}How does Outline Property Work in CSS?
We require putting the property of the parameters of CSS outline utilizing the basic syntax of CSS in HTML to achieve the desired outline styling.
In the next section, I will show many examples that will cover each and every aspect of the demonstration of all outline properties of CSS in an HTML code. It would be best if you did hands-on those by yourself for more practical understanding.
Examples of CSS Outline Property
Following are examples of css outline property are:
Example #1
In the first example, I will illustrate many cases of outline styling. In the output section, you will be able to see how one can achieve a different designed outline style as per their choice using various values of CSS outline style properties. It will be easier for you to understand if you refer to inline comments in the code.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.groove {outline-style: groove;} //defining many outline styling
p.double {outline-style: double;}
p.dashed {outline-style: dashed;}
p.inset {outline-style: inset;}
p.solid {outline-style: solid;}
p.dotted {outline-style: dotted;}
p.ridge {outline-style: ridge;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>This is demonstration of property of outline-style</h2>
<p>Text without any outline</p>
<p class="groove">Text with a groove outline</p>
<p class="double">Text with a dual outline</p>
<p class="dashed">Text with a dashed borderline</p>
<p class="inset">Text with a outline which is inset</p>
<p class="solid">Text with a solid border</p>
<p class="dotted">Text with a dotted boundary</p>
<p class="ridge">Text with a ridge outline</p>
<p class="outset">Text with a outline which is outset</p>
</body>
</html>Output:
Example #2
Sometimes, the outline of an element also needs coloring as per design so that the page looks attractive and eye-catchy. In the second scenario, we will see some illustrations of the coloring of the outline. We have shown here how to put a different color as per choice to the outline of an element in the HTML page with the help of CSS outline properties.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
outline-style:solid;
outline-color:blue; //defining many outline coloring
}
h2
{
outline-style:dashed;
outline-color:green;
}
</style>
</head>
<body>
<h1>This is demonstration of property of outline color</h1>
<h2>Text with a colored dashed outline</h2>
<h3>Text with a colored solid outline</h3>
</body>
</html>Output:
Look at the above output. The dashed outline has green color, and the solid one has a blue color. Think about how the coloring of the outline of an element gives it a highlight with other elements in an HTML page which may be attractive for users.
Example #3
By default, there is a thickness value associated with the outline. But here, CSS gives you full flexibility to change that according to your need. In this example, I will demonstrate how you can tweak the thickness of the border of the outline as per your need. This will be useful in cases where some of the elements need to be enclosed with a thick border to bring more attention to the user as an important part of the web page.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
outline-width:2px; //defining many outline width
outline-style:solid;
}
h2
{
outline-width:9px;
outline-style:dashed;
}
</style>
</head>
<body>
<h1>This is demonstration of property of outline width</h1>
<h2>Text with a thick dashed outline</h2>
<h3>Text with a thin solid outline</h3>
</body>
</html>Output:
Look at the above output. The dashed outline has a thick width compared to the solid outline with a thin width.
Example #4
Last but not least is the value of the offset. Offset defines the gap between the border and the outline of an element. Here, we have shown how you can increase or decrease the gap between the border and outline as per need. We have colored border and outline with different values so that it will be easy to identify the gap between them.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid red 3px;
outline-style:solid;
outline-offset:6px; //defining many outline offset values
}
h2
{
border:solid red 2px;
outline-offset:2px;
outline-style:dashed;
}
</style>
</head>
<body>
<h1>This is demonstration of property of outline offset</h1>
<h2>Text with a dashed outline with thin offset </h2>
<h3>Text with a solid outline with thick offset gap</h3>
</body>
</html>Output:
Look at the above output carefully. The dashed outline has a lesser gap with its border, but the solid outline has more gaps with its border.
Conclusion
The topic on “CSS outline property” is getting a conclusion here. In this topic, we have given so many examples which indicate mechanisms those ones can go through to use the values of many outline features of CSS coding of front-end HTML pages. This article can be considered one of a kind for coders who are interested in making their carrier in front-end web page development and design with CSS for their HTML page styling.
Recommended Articles
This is a guide to CSS Outline Property. Here we also discuss the definition and how outline property works in css. along with a different example and its code implementation. You may also have a look at the following articles to learn more –
