In css3 outline property is drawn around some targeted element or box.
There are following outline properties are defined below.
1) There is a property named as outline-color
This property is used for specify the different colors of outline which are
explained below.
2) There is another property named as outline-style
There are many styles for outline like solid,dashed or dotted etc. which are
also explained below.
3) There is another property named as outline-width
This property is used to specify different width to outline which are also
explained below.
Example of outline-color
<style type="text/css">
.d-1{
outline-color: #4d0000;
outline-style: solid;
border: 3px solid green;
}
</style>
<div class="d-1">This is div 1</div>
Output of above code
This is div 1
The outline-style
There are following style properties for outline-style.
1) hidden - This style is used for hidden outline
2) dotted - This style is used for dotted outline
3) solid - This style is used for solid outline
4) dashed - This style is used for dashed outline
5) double - This style is used for double outline
6) groove - This style is used for 3D groove outline
7) ridge - This style is used for 3D ridge outline
8) inset - This style is used for 3D inset outline
9) outset - This style is used for 3D outset outline
10) none - This style is used for no outline
Example of border styles
<style type="text/css">
.d-1{
outline-style: hidden;
outline-color: red;
}
.d-2{
outline-style: dotted;
outline-color: red;
border: 2px solid green;
}
.d-3{
outline-style: solid;
outline-color: red;
border: 2px solid green;
}
.d-4{
outline-style: dashed;
outline-color: red;
border: 2px solid green;
}
.d-5{
outline-style: double;
outline-color: red;
border: 2px solid green;
}
.d-6{
outline-style: groove;
outline-color: red;
border: 2px solid green;
}
.d-7{
outline-style: ridge;
outline-color: red;
border: 2px solid green;
}
.d-8{
outline-style: inset;
outline-color: red;
border: 2px solid green;
}
.d-9{
outline-style: outset;
outline-color: red;
border: 2px solid green;
}
.d-10{
outline-style: none;
outline-color: red;
}
</style>
<div class="d-1">hidden outline style</div>
<div class="d-2">dotted outline style</div>
<div class="d-3">solid outline style</div>
<div class="d-4">dashed outline style</div>
<div class="d-5">double outline style</div>
<div class="d-6">groove outline style</div>
<div class="d-7">ridge outline style</div>
<div class="d-8">inset outline style</div>
<div class="d-9">outset outline style</div>
<div class="d-10">none outline style</div>
Output of above code
hidden outline style
dotted outline style
solid outline style
dashed outline style
double outline style
groove outline style
ridge outline style
inset outline style
outset outline style
none outline style
Example of border-width
<style type="text/css">
.w-1{
outline-color: #4d0000;
outline-style: solid;
outline-width: 10px;
border: 5px solid green;
}
</style>
<div class="w-1">This is div 1</div>
Output of above code
This is div 1
The outline shorthand properties
outline: outline-width outline-style outline-color;
<style type="text/css">
.d-1{
outline: 5px solid blue;
border: 5px solid green;
}
</style>
<div class="d-1">This is div 1</div>
Output of above code
This is div 1
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
