CSS Outline
An outline is a line that is drawn outside the element’s border, to make the element stylish.
Here is how an outlined element looks like:
This paragraph has a 2px black border and a red outline with a width of 10px.
In an example below let’s write a code to set the outline of an element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #ff0000 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>This paragraph has a 2px black border and a red outline with a width of 10px.</p>
</body>
</html>
NOTE:- Don’t use the outline property if you don’t had defined the border of an element.
CSS has the several outline properties, Like:
- Outline-style
- Outline-color
- Outline-width
CSS Outline-style
The outline-style property defines the style of an outline. It can have one of the the following values.
- solid – Specifies a solid outline
- dashed – Specifies a dashed outline
- dotted – Specifies a dotted outline
- double – Specifies a double outline
- groove – Specifies a groove outline
- ridge – Specifies a ridge outline
- inset – Specifies a inset outline
- outset – Specifies a outset outline
- none – Doesn’t specify outline
- hidden – Specifies a hidden outline
In an example below let’s write a code to define different outline-style values.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:green; text-align:center;}
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>
<h1>CSS outline-style Property</h1>
<p class="dotted">Dotted outline</p>
<p class="dashed">Dashed outline</p>
<p class="solid">Solid outline</p>
<p class="double">Double outline</p>
<p class="groove">Groove outline</p>
<p class="ridge">Ridge outline</p>
<p class="inset">Inset outline</p>
<p class="outset">Outset outline</p>
</body>
</html>
CSS Outline-width
CSS outline-width property defines the width of an outline. It can only have one of the following values.
- thin
- medium
- thick
- specific size
In an example below let’s write a some outlines with different widths.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.c1 {
border: 1px solid black;
outline-style: solid;
outline-color: green;
outline-width: thin;
}
p.c2 {
border: 1px solid black;
outline-style: solid;
outline-color: green;
outline-width: medium;
}
p.c3 {
border: 1px solid black;
outline-style: solid;
outline-color: green;
outline-width: thick;
}
p.c4 {
border: 1px solid black;
outline-style: solid;
outline-color: green;
outline-width: 4px;
}
p.c5 {
border: 1px solid black;
outline-style: solid;
outline-color: green;
outline-width: 20px;
}
</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="c1">A thin outline.</p>
<p class="c2">A medium outline.</p>
<p class="c3">A thick outline.</p>
<p class="c4">A 4px thick outline.</p>
<br>
<p class="c5">A 20px thick outline.</p>
</body>
</html>
CSS Otline Color
CSS outline-color property defines the color of an outline. The color name can be set by using color name, HEX value, RGB value, or HSL value.
In an example below let’s write a code and define different outlines with different colors.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.c1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.c2 {
border: 2px solid black;
outline-style: dotted;
outline-color: #ff0000;
}
p.c3 {
border: 2px solid black;
outline-style: dashed;
outline-color: RGB(255, 0, 0);
}
p.c4 {
border: 2px solid black;
outline-style: groove;
outline-color: hsl(0, 100%, 50%);
}
</style>
</head>
<body>
<h1>The outline-color Property</h1>
<p>Here we will define different outlines using different color values</p>
<p class="c1">A solid red outline.</p>
<p class="c2">A dotted red outline.</p>
<p class="c3">A dashed red outline.</p>
<p class="c4">A groove red outline.</p>
</body>
</html>
