sajad torkamani

When debugging CSS issues, you might find it useful to add a black border to every element on the page:

* {
  border: 1px solid black;

This can surface many issues like:

  • Bad alignment (e.g., an element should be horizontally / vertically centered but isn’t).
  • Unintended overflow (e.g., an element overflows its parent container when it shouldn’t).
  • Wrong dimensions (e.g., an element’s height / width is smaller or bigger than it should be).


It’ll be a fun exercise to create a Chrome extension that runs the below snippet:

const style = document.createElement('style');
style.innerHTML = '* { border: 1px solid black }';
Tagged: CSS