Home >>CSS Tutorial >CSS Outline

CSS Outline

CSS Outline

The CSS outline property allows us to draw a line around an element just outside the border edge of the element such as active form field, buttons, etc. to make them “stand out”. It is just like CSS border property. It helps you to draw an extra border around an element.

Difference between Outlines and Borders

The outlines are generally used to highlight elements.Outlines differs from border in the following ways:

  • Outlines do not take up space.
  • Outline are always the same on all sides. It won’t allow us to set each side of an element to a different width.
  • Outlines don’t change the position or size of the element, just like borders.
  • Outlines may be non-rectangular.

CSS Outline Properties

Property Description
Outline-color It is used to set the color of the outline that you want to use. The color can be set by its name, hex value or RGB value.
Outline-style It is used to set the style or type of the outline.
Outline-width It is used to set the width of the outline in a specific size (in px, pt, cm, em, etc).
Outline-offset It is used to create space between an outline and the border of an element.

1. Outline color

The color of the Outline can be set by its name, hex value or RGB value. It highlights the edge of the element or set the color of the outline you want to display in browser.

Let's take an Example of outline-color:

<!DOCTYPE html>  
<html>  
<style type="text/css">  
.outline-box {  
        background-color: #eee;  
        outline: 3px solid #68d9ed;  
        border: 3px solid #63a6f2;  
        padding: 5px 10px;  
}  
</style>  
<div class="outline-box">Welcome to Phptpoint.</div>  
</body>  
</html>
Output:

The outline-color Property

Welcome to Phptpoint.

2. Outline style

It is used to specify the line style or type of the outline.

There are following types of outline style:

  • dotted - Defines a dotted outline
  • dashed - Defines a dashed outline
  • solid - Defines a solid outline
  • double - Defines a double outline
  • groove - Defines a 3D grooved outline
  • ridge - Defines a 3D ridged outline
  • inset - Defines a 3D inset outline
  • outset - Defines a 3D outset outline
  • none - Defines no outline
  • hidden - Defines a hidden outline

Let's take an Example of outline style:

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

The outline-style Property

A double outline

A groove outline.

A dashed outline

A dotted outline

A solid outline

An inset outline.

A ridge outline.

An outset outline.

3. Outline width

It is used to set the width of the outline in a specific size (in px, pt, cm, em, etc).

Let's take an Example of CSS Outline width:

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  border: 1px solid black;
  outline-style: solid;
  outline-color: #41bbf0;
  outline-width: thin;
}
p.b {
  border: 1px solid black;
  outline-style: solid;
  outline-color: #f244aa;
  outline-width: medium;
}
p.c {
  border: 1px solid black;
  outline-style: solid;
  outline-color: #bf5df0;
  outline-width: thick;
}
p.d {
  border: 1px solid black;
  outline-style: solid;
  outline-color: #48c772;
  outline-width: 5px;
}</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="a"> thin outline.</p>
<p class="b"> medium outline.</p>
<p class="c"> thick outline.</p>
<p class="d"> 5px thick outline.</p>
</body>
</html>
Output:

The outline-width Property

thin outline.

medium outline.

thick outline.

5px thick outline.

4. Outline-Offset

It is used to create space between an outline and the border of an element.

Let's take an example of outline offset:

<!DOCTYPE html>
<html>
<head>
<style>
p.outline-offset {
  margin: 30px;
  border: 3px solid #a845cc;
  outline: 3px solid #d1419c;
  outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p class="outline-offset">Welcome to phptpoint Tutorial</p>
</body>
</html>
Output:

The outline-offset Property

Welcome to phptpoint Tutorial


Popular Tutorials