In CSS3, an outline is a line that’s drawn around the outside of an element. Outlines are essentially the exact same thing as borders, they even have the same syntax in your CSS, but they differ in their placement. Borders are lines drawn on the edge of your element, encasing the element’s content, but not ever going outside the element’s boundaries. Outlines, however, surround the element completely, meaning they do overstep the boundaries of the element to appear on the outside of it. The purpose of using outlines in CSS is often to give a particular emphasis to your elements.
For outlining text using CSS check out this CSS Stroke (a definitive guide) that shows various techniques for adding an outline for text elements.
The syntax for creating an outline is the same as for creating a border. The shorthand takes three values: the width of the line, the style of the line, and the color of the line, so it would look like this:
- outline: [width] [style] [color]
If you place an outline and a border on one single object, the outline will, of course, surround the border. See an example of how this would look below:
- .container{
- border: 1px solid #000;
- outline: 2px dashed #45c594;
- }
