CSS outline property allows us to draw a line around the element, outside the border.
CSS has following outline properties:
1.Outline-style
2.Outline-color
3.Outline-width
4.Outline-offset
1.OUTLINE STYLE
The outline-style property tells us the style or type of outline.
Any other outline property cannot be accessed without setting the outline-style.
Types of outline-style:
1.Dotted
2.Dashed
3.Solid
4.Double
5.Groove
6.Ridge
7.Inset
8.Outset
Syntax:
body
{
outline-style:style name;
}
Example:
<!DOCTYPE html><html><head><style>p.dotted {outline-style: dotted;}p.dashed {outline-style: dashed;}p.solid {outline-style: solid;}p.double {outline-style: double;}p.groove {outline-style: groove;}p.ridge {outline-style: ridge;}p.inset {outline-style: inset;}p.outset {outline-style: outset;}</style></head><body> <h2>The outline-style Property</h2><p>Geeksforgeeks</p> <p class="dotted">A dotted outline.</p><p class="dashed">A dashed outline.</p><p class="solid">A solid outline.</p><p class="double">A double outline.</p><p class="groove">A groove outline.</p><p class="ridge">A ridge outline.</p><p class="inset">A inset outline.</p><p class="outset">A outset outline.</p></body></html> |
OUTPUT:
2.OUTLINE COLOR
Outline color property specifies the color of the outline.
The color can be set by its name, RGB value or hex value.
Syntax:
body
{
outline-style:style name;
outline-color:color name;
}
Example 1:
<!DOCTYPE html><html><head><style>h3{border:solid blue 4px;outline-style:solid;outline-color:red;}</style></head><body><h1>GEEKSFORGEEKS</h1><h3>OUTLINE PROPERTIES</h3></body></html> |
OUTPUT:
Example 2:
<!DOCTYPE html><html><head><style>h3{border:solid orange 4px;outline-style:dashed;outline-color:green;}</style></head><body><h1>GEEKSFORGEEKS</h1><h3>OUTLINE PROPERTIES</h3></body></html> |
OUTPUT:
3.OUTLINE WIDTH
Outline width property is used to set the width of the outline.
Width of the outline can be set by specifying the size of the width in px, cm, pt, etc or by using terms like thin, thick, medium.
Syntax:
body
{
outline-style:style name;
outline-width:size;
}
Example 1:
<!DOCTYPE html><html><head><style>h3{border:solid blue 4px;outline-style:solid;outline-width:8px;}</style></head><body><h1>GEEKSFORGEEKS</h1><h3>OUTLINE PROPERTIES</h3></body></html> |
OUTPUT:
Example 2:
<!DOCTYPE html><html><head><style>h3{border:solid red 4px;outline-style:solid;outline-width:3px;}</style></head><body><h1>GEEKSFORGEEKS</h1><h3>OUTLINE PROPERTIES</h3></body></html> |
OUTPUT:
4.OUTLINE OFFSET
Outline offset property is used to specify space between the outline and the border of the element.
Syntax:
body
{
outline-style:style name;
border-style:style name;
outline-offset:size;
}
Example:
<!DOCTYPE html><html><head><style>h3{border:solid blue 3px;outline-style:solid;outline-offset:7px;}</style></head><body><h1>GEEKSFORGEEKS</h1><h3>OUTLINE PROPERTIES</h3></body></html> |
OUTPUT:
Example 2:
<!DOCTYPE html><html><head><style>h3{border:solid green 3px;outline-style:solid;outline-offset:14px;}</style></head><body><h1>GEEKSFORGEEKS</h1><h3>OUTLINE PROPERTIES</h3></body></html> |
OUTPUT:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.
