Responsive borders with CSS outline

Published on 03 July 2020 by Andy Bell

You can use outline instead of border to achieve the same visual effect, but it’ll bleed over the edges nicely.

It’s really handy for setting borders for responsive UI where when the screen is narrow or shallow, the border is concealed.

Code language
css

.my-element {
  outline: 3px solid #ff00ff;
}