What is the difference between CSS border and outline?

In CSS, both border and outline can provide borders for elements, but they have several key differences:

1. Box Model Impact:

   • border is part of the box model and affects the element's total dimensions; setting a border increases the element's width and height.
   • outline is not part of the box model and does not affect the element's dimensions; it is drawn outside the element and does not occupy space.

2. Style Differences:

   • border can be configured for each side individually (e.g., border-top, border-right, border-bottom, border-left), allowing separate control of width, style, and color for each side.
   • outline is typically treated as a single unit and does not support individual side configuration; its style, width, and color are consistent across all four sides.

3. Rounded Corners:

   • border can utilize the border-radius property to create rounded corners.
   • outline traditionally does not support rounded corners (though some newer browser versions may offer limited support, not all browsers do).

4. Accessibility Differences:

   • border is commonly used for decorative purposes and layout adjustments.
   • outline is often employed for accessibility, such as highlighting keyboard focus, and remains unaffected by standard border styles.

Example

Suppose we have a button where we want to display an outline on focus to enhance visual feedback without altering the layout:

html
<button>Click me</button>

css
button {
  border: 2px solid blue;
  padding: 10px 20px;
  background-color: white;
}

button:focus {
  outline: 3px solid red;
}

In this example, the button features a blue border, and when focused, it adds a red outline. This outline does not affect the button's actual size, providing visual feedback only. The blue border is part of the button and influences its dimensions.