CSS | Outline

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

CSS has following outline properties:

1.Outline-style
2.Outline-color
3.Outline-width
4.Outline-offset




1.OUTLINE STYLE

The outline-style property tells us the style or type of outline.
Any other outline property cannot be accessed without setting the outline-style.

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>Geeksforgeeks</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>

chevron_right



OUTPUT:



2.OUTLINE COLOR

Outline color property specifies the color of the outline.
The color can be set by its name, RGB value or hex value.

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

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



OUTPUT:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



OUTPUT:


3.OUTLINE WIDTH

Outline width property is used to set the width of the outline.
Width of the outline can be set by specifying the size of the width in px, cm, pt, etc or by using terms like thin, thick, medium.

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

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



OUTPUT:

Example 2:


filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



OUTPUT:


4.OUTLINE OFFSET

Outline offset property is used to specify space between the outline and the border of the element.

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



OUTPUT:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



OUTPUT:



My Personal Notes arrow_drop_up

Recommended Posts:



    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.