Responsive borders with CSS outline

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.

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

Enjoyed this article? You can support us by leaving a tip via Open Collective?