CSS
[Link]
Outline
⚫ The outline CSS shorthand property allows drawing a line around the
element, outside the border.
⚫ It is used to set all the properties of the outline in a single declaration.
CSS outline properties can be categorized into 4 types:
1. Outline-style
2. Outline-color
3. Outline-width
4. Outline-offset.
➢ Outline-style
It is used to set the appearance of the outline of an element ie., it tells us
the style or type of outline.
Any other outline property cannot be accessed without setting the outline-
style. If absent then the default style will be set to none.
Syntax:
outline-style:
auto|none|dotted|dashed|solid|double|groove|ridge|inset|o
utset|initial|inherit;
Example: This example illustrates the Outline property where the style is
set to the dotted lines.
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<style>
.dotted {
outline-style: dotted;
color: green;
text-align: center;
}
</style>
</head>
<body >
<h1>Topper World</h1>
<h3>Outline Property</h3>
<p class="dotted">A Computer Science portal for students.</p>
</body>
</html>
Output:
©Topperworld
CSS
➢ Outline-color
• It is used to sets the outline color of an element.
• The color can be set by its name ie., rgb value or a hex value, etc.
• If absent then the default color will be the current color.
Syntax:
outline-color: <color> | invert | inherit;
Example: This example illustrates the Outline property where the color is set
to the specific color value.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: solid orange 4px;
outline-style: solid;
outline-color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Topper World</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for students.</p>
</body>
</html>
©Topperworld
CSS
Output:
➢ Outline-width
• It is used to specify the width of this outline for a specific element.
• The width of the outline can be set by specifying the size of the width in
px, cm, pt, etc, or by using terms like a thin, thick, medium.
• If absent then the default width will be the medium.
Syntax:
outline-width: medium|thin|thick|length|initial|inherit;
Example: This example illustrates the Outline property where the width is set
to the specific value.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: solid green 4px;
outline-style: solid;
outline-width: 3px;
text-align: center;
}
</style>
</head>
©Topperworld
CSS
<body>
<h1>Topper World</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for students
.</p>
</body>
</html>
Output:
➢ Outline-offset
• The CSS outline-offset Property sets the amount of space between an
outline and the edge or border of an element.
• An outline is a line drawn around elements outside the border edge.
• The space between the element and its outline is transparent.
• Also, the outline may be non-rectangular.
• The default value is 0.
Syntax:
outline-offset: length|initial|inherit;
Example: This example illustrates the Outline property where the offset is
defined with a specific value.
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: solid green 3px;
outline-style: solid;
outline-offset: 3px;
text-align: center;
}
</style>
</head>
<body>
<h1>Topper World</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for students.</p>
</body>
</html>
Output:
©Topperworld
