CSS
CSS Outline
Make an element stand out with the CSS outline property. It surrounds the borders of the element from the outside. The outline of the element can be customized with the following CSS outline properties:
- outline
- outline-style
- outline-colour
- outline-width
- outline-offset
Note: CSS outline and CSS borders are not the same. It is drawn outside the border. Additionally, changing the dimensions of the outline does not affect the size of the element.
.highlight-button {
padding: 10px 20px;
border: 2px solid #444;
outline: 3px solid orange; /* Outline style, width, and color */
outline-offset: 5px /* Space between border and outline */
}CSS Outline Style
The style and appearance of the element’s outline outside its border are specified with this property. It can be:
- Dotted
- Dashed
- Solid
- Grooved
- Ridged
- Double
- Inset
- Outset
- None or
- Hidden
.dotted { outline-style: dotted; }
.dashed { outline-style: dashed; }
.solid { outline-style: solid; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge { outline-style: ridge; }
.inset { outline-style: inset; }
.outset { outline-style: outset; }CSS Outline Width
Developers specify the outline’s width with this property. It can have different values depending on how thick or thin you want the outline to be. Its size is measured in px, pt, cm, em, and other units.
.thin { outline-width: 5px; }
.medium { outline-width: thick; }
.thick { outline-width: thin; }CSS Outline Color
With this property, you can give any colour to the outline. Outline colour can only be specified if the colour details are added. For example, colour name, its Hex, RGB, and HSL values.
It also offers colour inversion. So, if you want to display an outline by inverting colours, use this feature. The outline will always be visible with colour inversion, regardless of the background colour.
.named { outline-color: red; }
.hex { outline-color: #00bcd4; }
.rgb { outline-color: rgb(76, 175, 80); }
.hsl { outline-color: hsl(45, 100%, 50%); }
.invert { outline-color: invert; }CSS Outline Offset
Use this property to add spacing between the outline and the border of the element. It has no colour, which means it is always transparent.
.offset-0 { outline-offset: 0px; }
.offset-5 { outline-offset: 5px; }
.offset-10 { outline-offset: 10px; }