Definition:
CSS outline-style is used to style the outline drawn around the outer part of the border in an element. In the below image, the outline is styled by solid red color. Outline-style has different property values. See below the list of styles used in CSS properties.
Here are the property values that use to style the outline-style:
1. dashed
2. dotted
3. double
4. groove
5. solid
6. hidden
7. inset
8. outset
9. none
10. ridgeSyntax:
1. outline-style: dashed
2. outline-style: dotted
3. outline-style: double
4. outline-style: groove
5. outline-style: solid
6. outline-style: hidden
7. outline-style: inset
8. outline-style: outset
9. outline-style: none
10. outline-style: ridgeNow let’s go through each above property value one by one to understand clearly how you use it into outline-style.
1) outline-style: dashed
Definition:
outline-style: dashed keeps the outline of the border in dashes format. See the output of outline-style: dashed.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: dashed;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with dashed red outline. Outline-style is dashed.<br/>outline-style: dashed; </div>
</p>
</body>
</html>
Output:
2) outline-style: dotted
Definition:
outline-style: dotted keeps the outline of the border in dotted format. See the output of outline-style: dotted.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: dotted;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with dotted red outline. Outline-style is dotted.<br/>outline-style: dotted; </div>
</p>
</body>
</html>
Output:
3) outline-style: double
Definition:
outline-style: double keeps the outline of the border into double line. See the output of outline-style: double.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: double;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with double red outline. Outline-style is double.<br/>outline-style: double; </div>
</p>
</body>
</html>
Output:
4) outline-style: groove
Definition:
outline-style: groove keeps the outline of the border in groove format. See the output of outline-style: groove.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: groove;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with groove red outline. Outline-style is groove.<br/>outline-style: groove; </div>
</p>
</body>
</html>
Output:
5) outline-style: solid
Definition:
outline-style: solid keeps the outline of the border in solid line. See the output of using outline-style: solid.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: solid;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with solid red outline. Outline-style is solid.<br/>outline-style: solid; </div>
</p>
</body>
</html>
Output:
6) outline-style: hidden
Definition:
outline-style: hidden keeps the outline of the border’s hidden. See the output of using outline-style: hidden.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: hidden;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with hidden outline. Outline-style is hidden.<br/>outline-style: hidden; </div>
</p>
</body>
</html>
Output:
7) outline-style: inset
Definition:
The outline-style inset effect depends on the outline color value. See the below image for a better understand.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: inset;
outline-color: red;
outline-width: 20px;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with inset red outline. Outline-style is inset.<br/>outline-style: inset; </div>
</p>
</body>
</html>
Output:
8) outline-style: outset
Definition:
The outline-style outset effect depends on the outline color value. See the below image for a better understand.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: outset;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with outset red outline. Outline-style is outset.<br/>outline-style: outset; </div>
</p>
</body>
</html>
Output:
9) outline-style: none
Definition:
The outline-style none is the default value. This property value specifies the outline-style with none outline. See the output of the below image with outline-style is none.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: none;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with none outline. Outline-style is none.<br/>outline-style: none; </div>
</p>
</body>
</html>
Output:
10) outline-style: ridge
Definition:
The outline-style ridge effect depends on the outline color value. See the below image for a better understand.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: ridge;
outline-color: red;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with ridge red outline. Outline-style is ridge.<br/>outline-style: ridge; </div>
</p>
</body>
</html>
Output:
You may be interested in the following topics:
- CSS Outline-offset
- CSS Outline-width
- CSS Outline-style
- CSS Outline-color
- CSS Outline
- CSS Outline (All Properties)