Design & Layout

Outline

Outline every element on the page to expose the box model and spot layout bugs, overflow and stray containers instantly.

When you'd use it

• Find the element causing horizontal scroll on mobile
• Spot the wrapper div adding mystery padding around a section
• See how deeply nested a component actually is
• Explain a layout problem visually to someone else

How to use Outline

1. Toggle Outline from the popup.
2. Every element gets a visible border showing its true bounds.
3. Look for boxes extending past the viewport, or nested wrappers you did not expect.
4. Toggle it off to return to normal.

Outline FAQ

Why is this better than adding a CSS outline myself?

It needs no code change and works on any site, including production and sites you did not build.

How does this help with horizontal scrolling?

The element extending past the right edge becomes visible instantly, which is usually far quicker than bisecting your CSS.

Can I outline only one section?

It outlines everything, which is what makes stray boxes obvious. To focus on one component, pair it with the CSS Inspector on the specific element.

Works well with