IT Technology, Web development & Internet Marketing

Unleash the Power of CSS Outlines: Detailed Examples & Usage

Posted on by Thao Nguyen

The CSS outline property allows us to draw a line around an element outside the border.

CSS has the following profile properties:

1.Outline-style

2.Outline-color

3.Outline-width

4, Outline-offset

1. Shape style

The outline-style property tells us the style or type of outline.

If you don’t set the profile style, you can’t access any other profile properties.

Types of Outline-style:

1.Dotted

2.Dashed

3.Solid

4.Double

5.Groove

6.Ridge

7, Inset

8, Outset

Syntax:
body
{
outline-style:style name;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
  
<h2>The outline-style Property</h2>
<p>lsbin</p>
  
<p class = "dotted">A dotted outline.</p>
<p class = "dashed">A dashed outline.</p>
<p class = "solid">A solid outline.</p>
<p class = "double">A double outline.</p>
<p class = "groove">A groove outline.</p>
<p class = "ridge">A ridge outline.</p>
<p class = "inset">A inset outline.</p>
<p class = "outset">A outset outline.</p>
</body>
</html>
OUTPUT:

2. Contour color

The profile color property specifies the color of the profile.

The color can be set by name, RGB value or hexadecimal value.

Syntax:
body
{
outline-style:style name;
outline-color:color name;
}

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid blue 4px;
outline-style:solid;
outline-color:red;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>
OUTPUT:

Example 2：

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid orange 4px;
outline-style:dashed;
outline-color:green;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>
OUTPUT:

3.Outline-width

The profile width property sets the width of the profile.

The width of the profile can be set by specifying the size of the width in px, cm, pt, etc., or by using terms such as thin, thick, medium, etc.

Syntax:
body
{
outline-style:style name;
outline-width:size;
}

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid blue 4px;
outline-style:solid;
outline-width:8px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>
OUTPUT:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid red 4px;
outline-style:solid;
outline-width:3px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>
OUTPUT:

4.Outline-offset

The Outline Offset property is used to specify the space between the outline and the element’s border.

Syntax:
body
{
outline-style:style name;
border-style:style name;
outline-offset:size;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid blue 3px;
outline-style:solid;
outline-offset:7px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>
OUTPUT:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid green 3px;
outline-style:solid;
outline-offset:14px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>
OUTPUT:
Thao Nguyen