The outline property is used to draw an outline around an element. 5e6r40

An outline is a line that is drawn outside the [2].

An outline is similar to a border can have, but they differ in the following points:

• Outlines do not take up space. An outline is not part of an element’s border could. Adding or removing outlines also does not cause reflow or overflow on an element.

  Also, since the outline does not have a role in box formatting, it may overlap other elements on the page when it is drawn.

• An outline is drawn all around the four sides of an element. You cannot specify the sides where you want to draw the outline on. This makes sense because, after all, it is an outline and is used to highlight/focus elements on the page.
• You cannot apply a rounded corner to an outline. You can round the corners of the element’s [3]
• Outlines may be non-rectangular. Depending on the browser’s behavior, some elements may get outlines that are not rectangular. For example, older versions of Opera (most likely pre-WebKit) and Internet Explorer create a staggered outline around an inline element that has text with two different font sizes used.
  

  

  Also, if the element is broken across several lines, the outline is the minimum outline that encloses all the element’s boxes. Each part of the outline should be fully connected rather than open on some sides (as borders on inline elements are when lines are broken). The parts of the outline are not required to be rectangular. In contrast to borders, the outline is not open at the line box’s end or start, but should always be fully connected if possible.

  The following shows an outline drawn around an inline piece of text that is broken across two lines, and how it is rendered in Firefox (left) and Chrome (right). In Firefox, the outline is closed; while in Chrome, it is open.

  

The outline property is a shorthand property for the outline-color properties.

The outline of an element is usually drawn right outside the border edge. You can, however, draw the outline farther from the border using the outline-offset property is not set as part of the outline shorthand; you’ll have to set it on its own.

As you have seen in the examples above, the result of applying outline to an element is inconsistent across browsers. Outlines of inline elements spanning across multiple lines may be either open or closed depending on the browser. Outlines of an inline piece of text with two different font sizes used is also rendered differently across browsers:

Furthermore, the result of applying an outline is even more inconsistent when the element that you’re applying an outline to has content that is positioned outside its boundaries:

[1] The outline property is used to highlight or focus an element in the page. It is important to highlight tabbed elements so that s using the keyboard to move around the page know where exactly they are at. However, due to the inconsistencies in behavior among browsers in rendering the outline of an element, many developers prefer using box shadows to outline elements on focus states.

The outline property is usually added to form elements such as buttons and input fields to focus them when they are active or being tabbed by the .

[2] The outline property can be used to create multiple borders around an element. The box shadows can be used to create extra “borders” around the element.

You can read more about creating multiple borders in these articles:

• Multiple Backgrounds and Borders with CSS 2.1
• Multiple Borders with CSS

[3] There exists a non-standard Firefox-only -moz-outline-radius property that allows you to give outlines rounded corners just like you would give borders. You can read more about this in this entry on the Mozilla Developer’s Network.

input[type="text"]:focus {
    outline: 2px solid purple;
}
                

input[type="text"]:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: purple;
}