CSS outline
For displaying the outline in an element, we use this properties. This border property works for how many outline properties are of 4 types -
1. outline style
2. outline width property
3. outline color property
4. outline offset property
1 Outline style
By changing the value of the outline property in the web page, you can display the outline of different types, the values used in this property are as follows.
1 dotted- webpage has a dotted outline display
2 dashed- webpage has a dashed outline display
3 solid- webpage has solid outline display
4 double- webpage has double outline display
5 groove- webpage has a groove outline display
6 ridge- webpage has ridge outline display.
7 inset- webpage has inset outline display
8 outset- webpage has an outset outline display.
Example 1
|
<!DOCTYPE html> <html> <head><title></title> <style> p {outline-color:red;} </style> </head> <body> <p style="outline-style:dotted">dotted outline</p> <p style="outline-style:dashed">dashed outline</p> <p style="outline-style:solid">solid outline</p> <p style="outline-style:double">double outline</p> <p style="outline-style:groove">groove outline</p> <p style="outline-style:ridge">ridge outline</p> <p style="outline-style:inset">inset outline</p> <p style="outline-style:outset">outset outline</p> </body> </html> |
Output
2 Outline width property
To reduce or increase the width of the outline, use the outline width property, for this the value is given in px, cm, pt etc .. Also 3 default to change the outline width in this property. Let's use the value which is as follows -
1. thin
2. medium
3. thick
1 thin - Using this value, the outline's default width is about 1px.
2 medium - Using this value, the outline's default width (thickness) is about 3px.
3 thick - Using this value, the default width (thickness) of the outline is about 5px.
Example 2
|
<!DOCTYPE html> <html> <head> <style> p{ border: 1px solid black; outline-style: solid; outline-color: red; } </style> </head> <body> <p style="outline-width: thin;">thin outline.</p> <p style="outline-width: medium;">medium outline.</p> <p style="outline-width: thick;">thick outline.</p> <p style="outline-width: 5px;">5px outline.</p> </body> </html> |
Output
3 Outline color Property
This property is used to change the color of the outline displayed in the web page with the outline style property. To change the color, hex value, rgb value or color name of the color is given.
Example 3
|
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; } p.ex2 { border: 1px solid black; outline-style: double; outline-color: green; } p.ex3 { border: 1px solid black; outline-style: outset; outline-color: yellow; } </style> </head> <body> <p class="ex1">A solid red outline.</p> <p class="ex2">A double green outline.</p> <p class="ex3">An outset yellow outline.</p> </body> </html> |
Note: - Similarly, the color of the outline of all types changes.
output
4 Outline offset property
To reduce or increase the space between both the border and the outline, use the outline offset property, its value px, em, cm etc.Is given in
Example 4
|
<!DOCTYPE html> <html> <head><title></title> <style> p{ margin: 50px; } </style> </head> <body> <p style=" outline-offset: 15px; border: 1px solid black; outline: 1px solid red;"> outline offset 15px, border 1px </p> </body> </html> |
Outline
