CSS Workflow, Use Borders for Debugging Your Layouts Fast

When you’re styling any level of complex website layouts with CSS (beyond a simple article layout) things can get messy fast. This often leads to various layout issues.

Some of the most common CSS layout problems are:

  • Overlapping elements (often an overflow issue)
  • Collapsing elements (often a margin issue)
  • Extra white space (many things can cause this)

A simple way to get instant visual cues about your layout problems is to add borders around all your HTML elements, using CSS’s universal selector \*

Add this at the top of your CSS stylesheet:

\* { 
    border: 1px solid red; 

I did it on my own website and immediately recognized that my layout could need some adjustments.

Screenshot showing red borders around the elements on TechStacker’s front page.

Even if your layout doesn’t have any visual issues, this border trick can help to expose or point out things that could lead to issues down the road.


This can also be done with the outline property instead of the border property. It might be a better solution since outlines don’t take up space.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on