CSS OUTLINE
CSS OUTLINE COLOR
The outline-color property is used to set the color of the outline.The color can be set by:
- name: specify a color name, like "red"
- HEX: specify a hex value, like "#ff0000"
- RGB: specify a RGB value, like "rgb(255,0,0)"
- HSL: specify a HSL value, like "hsl(0, 100%, 50%)"
- invert: performs a color inversion (which ensures that the outline is visible,regardless of color background)
The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:
<p class="ex2"> dotted blue outline </p>
<p class="ex3"> outset gray outline</p>
<p class="ex1">A solid red outline</p>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
</style>
HEX Values
The outline color can also be specified using a hexadecimal value (HEX), RGB VAULE or HSL VAULES:
<p class="ex1"> HEX VALUE -dotted blue outline</p>
<p class="ex2"> RGB VAULE -outset gray outline </p>
<p class="ex3"> HSL VAULE -A solid red outline </p>
<style>
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}
p.ex2 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
p.ex3 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
</style>
Invert Color
The following example uses outline-color: invert; which performs a color inversion. This ensures that the outline is visible, regardless of color background:
<p class="ex1"> A dotted invert outline </p>
<style>
p.ex1 {
border: 1px solid yellow;
outline-style: dotted;
outline-color: invert;
background-color:crimson;
}
</style>
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.The following example specifies an outline 15px outside the border edge:
<p> Outlineoffset of 17px outside the border edge </p>
<style>
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 17px;
}
</style>
The following example shows that the space between an element and its outline is transparent
<p> The following example shows that the
space between an element and its outline is transparent: </p>
<style>
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
