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>
The outline-color Property
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>
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>
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>
The outline-offset Property
Welcome to phptpoint Tutorial