Question 1

What is the difference between CSS outline and border?

Accepted Answer

A border takes up layout space and affects the element's size, while an outline is drawn outside the border and does NOT affect layout or the box model. Outlines are commonly used for accessibility focus rings and :focus-visible states.

Question 2

What is the CSS outline-offset property?

Accepted Answer

outline-offset sets the distance between the outline and the border edge. A positive value pushes the outline outward (e.g. 4px), a negative value draws it inside the border, and 0 places it directly on the border edge.

Question 3

What outline styles are available in CSS?

Accepted Answer

CSS outline-style supports none, solid, dotted, dashed, double, groove, ridge, inset, outset and auto. The 'auto' value lets the browser draw a platform-native focus ring, ideal for accessibility.

Question 4

How do I write the CSS outline shorthand?

Accepted Answer

The shorthand combines width, style and color: outline: 2px solid #007bff; You can also add outline-offset separately since it is not part of the shorthand. Use outline-offset: 4px; to add space around the outline.