Outline-style
Outline-style It is used to set the appearance of the outline of an element ie., it tells us the style or type of outline. Any other outline property cannot be accessed without setting the outline-style. If absent then the default style will be set to none.
Syntax:
outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
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 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.