Outline-color
Outline-color is used to sets the outline color of an element. The color can be set by its name ie., rgb value or a hex value, etc. If absent then the default color will be the current color.
Syntax:
outline-color: <color> | invert | inherit;
Example: This example illustrates the Outline property where the color is set to the specific color value and outline style is solid.
HTML
<!DOCTYPE html> <html> <head> <style> p { border: solid orange 4px; outline-style: solid; outline-color: green; text-align: center; } </style> </head> <body> <h1>w3wiki</h1> <h3>Outline Property</h3> <p>A Computer Science portal for geeks.</p> </body> </html> |
Output:
CSS Outline
CSS Outline allows drawing a line outside the border of elements. It is used to set all the properties of the outline in a single declaration.
Try It:
2px solid
Currently Active Property:
outline: 2px solid;
Syntax:
selector{
outline: outline-width outline-type outline-color;
/*outline: 2px solid grey;*/
}
Example: This example uses the outline property to create a dashed blue outline.
HTML
<!DOCTYPE html> <html> <head> <style> .dotted { outline: 2px dashed blue; color: green; text-align: center; } </style> </head> <body> <h1>w3wiki</h1> <h3>Outline Property</h3> <p class="dotted"> A Computer Science portal for geeks. </p> </body> </html> |
Output:
CSS Outline Example output
CSS outline properties can be categorized into 4 types, namely, Outline-style, Outline-color, Outline-width & Outline-offset. We will discuss all the types of outline properties sequentially through the examples.