The outline attribute is very useful in improving web accessibility and debug layout, especially when users focus on elements. It will not affect the layout, usually be rectangular, only one element can have one, and the browser will be added to form controls by default; while border will take up space, can set rounded corners, support multi-layer borders, and need to be set manually. In actual use, it is recommended to retain or customize the focus style to ensure user experience.

outline attribute of CSS is often overlooked, but it is very useful in some scenarios, especially in improving the accessibility of web pages. Unlike border , outline has its own characteristics and usage scenarios. Let’s talk about its usage and the difference from border .

What is outline? What's the use?

outline is an abbreviation property that sets the style, color and width of the element outline at the same time. The most common usage is that when a user clicks or uses the keyboard to focus an element (such as a button or link), the browser will automatically add an outline, which is one of the functions of outline .

 button:focus {
  outline: 2px solid blue;
}

This attribute will not affect the layout, which means it will not occupy space and will not make the element larger. This is very different from border .

The main differences between outline and border

Although they can all add border effects to elements, there are several key differences that need to be paid attention to:

• Does it affect the layout : border will take up space, but outline will not.
• Shape limitation : outline is usually rectangular and cannot set the radians of each corner (such as rounded corners) like border .
• Is it possible to have multiple : an element can only have one outline , but multiple border can be available (multi-layer borders are implemented through pseudo-elements).
• Default behavior : Some browsers will automatically add outline when the form control gets focus, while border needs to be set manually.

If you find a strange border when an element on the page is focused, it is likely that the browser adds outline by default.

Suggestions in actual use

In actual development, outline has two most common uses: debug layout and improve accessibility.

• If you want to temporarily view the location of an element, you can quickly mark it with outline , without affecting the overall layout.
• When doing barrier-free optimization, do not easily remove outline , otherwise it will affect the operating experience of keyboard users.

If you really need a custom focus style, it is recommended to retain some kind of visual feedback, such as this:

 input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
}

This is both beautiful and will not make the user unable to find the elements currently focused.

Basically that's it. Although outline looks simple, it is very practical in detail processing, especially in terms of interaction design and accessibility.

The above is the detailed content of Using css outline property and its difference from border. For more information, please follow other related articles on the PHP Chinese website!