Skip to content
Related Articles

Related Articles

CSS | Outline
  • Last Updated : 23 May, 2018

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:




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

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:




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

OUTPUT:

Example 2:




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

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:




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

OUTPUT:

Example 2:




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

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:




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

OUTPUT:

Example 2:




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

OUTPUT:

My Personal Notes arrow_drop_up
Recommended Articles
Page :