CSS Outline
Outline is that line which we use to draw outside of any elements or border.
There are 5 main properties we are having here in outline and these are as follows:-
- outline-style
- outline-color
- outline-width
- outline
- outline-offset
Outline-style
This allows you to select the style of outline which you want to display .
Some of the values are as follows explained in the program :-
<!DOCTYPE html>
<html>
<head>
</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>
<p style="outline-style:none;"> none outline </p>
<p style="outline-style:hidden;"> hidden outline </p>
</body>
</html>
Output of the Program
dotted outline
dashed outline
solid outline
double outline
groove outline
ridge outline
inset outline
outset outline
none outline
hidden outline
Here in the above program dotted, dashes , solid , double, groove, ridge, inset, outset, none and hidden are the values.
Let's understand what these values are responsible for:-
Values | Description |
dotted | Defines a dotted outline |
dashed | Defines a dashed outline |
solid | Defines a solid outline |
double | Defines a double outline |
groove | Defines a groove outline |
ridge | Defines a ridge outline |
inset | Defines a inset outline |
outset | Defines a outset outline |
none | Defines a none outline |
hidden | Defines a hidden outline |
Outline-width
This allows you to adjust the width of outline which you want to display .
We can set this width by using the following values:-
- thin
- thick
- medium
- length(in pt px cm etc.)
Before providing the outline-width property we must set the outline-style-property first.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:2px solid red;
outline-style:solid;
outline-width:5px;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the outline-width of 5px in the paragraph. And here we can also set the values to thin, thick, medium etc.
Outline-color
This allows you to change the color of the outline which you want to display .
We can set this color by using the following values:-
- color name
- Hex values (#ff0000)
- RGB values "rgb(255,0,0)"
- transparent
Before providing the outline-color property we must set the outline-style-property first.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
.red{
border:3px solid yellow;
outline-style:solid;
outline-color:red;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p class="red"> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the outline-color of red in the paragraph. And here we can also set the values to RGB, Hex values,transparent etc.
Outline
This allows you to change the style,width and color property of the outline in a single line which you want to display .
Order of writing outline shorthand property
- outline-width
- outline-style(important)
- outline-color
And the same above order we have to follow if we want to use outline shorthand property, we can also omit the properties if we
want but the order again will be same and the outline-style property is very must.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:2px solid yellow;
outline: 5px solid red;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p class="red"> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the outline-size, outline-style and outline-color by specifying these
properties in single line.
Outline-offset
This allows you to add spaces between your outline and border or edge of the element.
Let's understand this by the following program
<!DOCTYPE html>
<html>
<head>
<style>
p{
border:2px solid yellow;
outline: 5px solid red;
outline-offset:10px;
}
</style>
</head>
<body>
<p> I am Manish </p>
<p class="red"> Hey I love India </p>
</body>
</html>
Output of the Program
I am Manish
Hey I love India
So we get the spaces between the border and the outline.